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。