d3:用更多维数组复制路径

d3: duplicating paths with more dimensional array

本文关键字：数组 复制 路径 d3      更新时间：2023-09-26

我用以下点（而不是随机点）复制了样条曲线示例：

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初学者的任何帮助。

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

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。

相关文章：