时间戳

首页 > 解决方案 > 使用 svg 元素作为范围创建 d3.js 比例

javascript - 使用 svg 元素作为范围创建 d3.js 比例

问题描述

我正在尝试创建一个包含 svg 元素作为范围的比例。例如，一个线性连续刻度，其范围包含半径范围为 0 到 100 的圆，也可以查询这些圆。这样做的目的是将比例传递给图例制作者，该制作者使用 d3 比例的良好属性来构建图例。

我可以创建在浏览器的页面检查器中看到的圆圈，但它们不会显示在重要的地方。这是为什么？如果 append() 接受一个 dom 元素，为什么它不显示？

let canvas = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 200);

let domFun = function(scale, range) {
    scale.range(range);
    return function(d) {
        let template = document.createElement("template");
        template.innerHTML = scale(d);
        let dom = template.content.childNodes[0];
        return dom;
    }
};

let cScale = domFun(d3.scaleLinear(), ["<circle r = 0>", "<circle r = 100>"]);

let data = [0.2, 0.3, 0.6, 1];

canvas.selectAll("circle").data(data).enter()
    .append(d => cScale(d))
    .attr("cy", 100)
    .attr("cx", (d, i) => (i + 0.5) * 200)
    .attr("fill", "red");

感谢这里的任何帮助/输入。

标签： javascriptd3.js

解决方案

为什么要使用刻度来构造一些标签并使用函数从另一个标签中提取它？

只需使用比例计算半径即可看到圆圈

let canvas = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 200);

let cScale = d3.scaleLinear().range([0, 100]);
let data = [0.2, 0.3, 0.6, 1];

canvas.selectAll("circle").data(data).enter()
    .append("circle")
    .attr("r", d => cScale(d))
    .attr("cy", 100)
    .attr("cx", (d, i) => (i + 0.5) * 200)
    .attr("fill", "red");

编辑

可以使用 Object 插值器来代替使用字符串插值器和构造 DOM 元素。这还允许您插入颜色。

let canvas = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 200);

let icScale = d3.scaleLinear().range([{r:10, fill:"red", cx:100}, {r:100, fill:"yellow", cx:700, cy:100, shape:"circle"}]);
let data = icScale.ticks(5);

let shape = icScale(data[0]).shape;
canvas.selectAll(shape).data(data).enter()
    .append(shape)
    .attrs(d => icScale(d));

你需要添加

<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

这要在你的 HTML 页面中使用.attrs()。

只有第二个对象需要有shape属性，也因为这里cy没有变化，只需要在第二个对象中。

如果您需要保留秤返回的对象，请注意您必须制作副本。

推荐阅读