d3JS：遍歷未知點數的路徑

Question

此問題是original question regarding line segments的擴展。

關於原始問題，從tsv中繪製線段的問題已通過this script（感謝@VividD）解決。下面是從TSV繪製兩條線段的數據：

x0  y0  x1  y1  weight 
0.5  0.5  0.2  0.2  2 
0.25 0.35 0.7  0.8  1 

現在，我試圖繪製未知數量的頂點的路徑（或折線）。這需要腳本遍歷每一行，查找要添加到每個路徑數據的列數。我不知道如何做到這一點，因爲我一直在假設程序員知道列名（d.close，d.date等）。

x0  y0  x1  y1  x2  y2   weight 
0.5  0.5  0.2  0.2       2 
0.25 0.35 0.7  0.8  0.5  0.6   1 

有沒有人有一個想法，如何遍歷上面的例子，爲每一行數據繪製路徑？

Answer 1

假設數據是在陣列data，這會創建可變長度的數組points爲每個元組：

data.forEach(function(d) { 
    d.points = []; 
    for (var i = 0; d["x"+i] !== "" && (typeof d["x"+i] !== 'undefined'); i++) { 
     d.points.push([d["x"+i], d["y"+i]]); 
    } 
}); 

例如在你的榜樣

d.points = [[0.5, 0.5], [0.2, 0.2]] 

第一排，然後可以用來繪製線條：

var line = d3.svg.line(); 

svg.selectAll("path") 
    .data(data) 
    .enter() 
    .append("path"); 

svg.selectAll("path") 
    .attr("d", function(d) { return line(d.points); }) 
    .attr("stroke-width", function(d) { return (d.weight); }) 
    .attr("stroke", "black") 
    .attr("fill", "none"); 

完整的示例here。