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")，以便选择所有路径元素。

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

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

选中plunker。

d3：复制具有更多维数组的路径

1 个答案: