javascript - d3 : duplicating paths with more dimensional array

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);

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

在重绘函数中，将 svg.select("path") 更改为 svg.selectAll("path")，以便选择所有路径元素.

此外，当您添加圆时，您可以获取所有点并将它们转换为一维数组:

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

检查这个plunker .