d3：使用更多维数组复制路径

Question

我用以下点（而不是随机点）复制了 spline example：

var points = [[75, 15], [104, 80], [275, 80], [300, 15]];

效果很好。现在我想用以下节点绘制两条路径（也都是可拖动的）：

var points = [ 
    [[75, 15], [104, 80], [275, 80], [300, 15]], 
    [[50, 20], [50, 100], [200, 200], [100, 300]] 
];

我通过选择第一个数组完美地绘制了第一条路径：

svg.append("path")
    .datum(points[0])
    .attr("class", "anchorPointPath")
    .call(reDraw);

...但我无法绘制两条路径！感谢对 d3 初学者的任何帮助。

Answer 1

首先您需要更改添加路径的方式：

svg.selectAll("path").data(points).enter().append("path")
    .datum(function(d) { return d;})
    .attr("class", "line")
    .call(redraw);

这需要两个点数组，并为其中的每个数组添加一个路径。对于这些子数组中的每一个，它都绑定该数组的数据 return d;.

在重绘功能上，将svg.select("path")更改为svg.selectAll("path")，以便select所有路径元素。

此外，当你添加圆圈时，你可以将所有的点转换成一维数组：

var circles = points.reduce(function(t, c) {
    return t.concat(c)
  });
var circle = svg.selectAll("circle")
  .data(circles, function(d) { return d; });

检查此 plunker。

d3：使用更多维数组复制路径

d3: duplicating paths with more dimensional array

javascript

d3.js