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

此外，当您添加的圈子里，你可以把所有的点，并将它们转换成一维数组：

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

检查这个plunker。