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。