Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/386.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript d3JS:遍历未知点计数的路径_Javascript_D3.js_Tsv - Fatal编程技术网

Javascript d3JS:遍历未知点计数的路径

Javascript d3JS:遍历未知点计数的路径,javascript,d3.js,tsv,Javascript,D3.js,Tsv,这是一个问题的延伸 关于原始问题,从tsv绘制线段的问题已通过解决(感谢@livided)。以下是从tsv绘制两条线段的数据: x0 y0 x1 y1 weight 0.5 0.5 0.2 0.2 2 0.25 0.35 0.7 0.8 1 现在,我正在尝试绘制顶点数目未知的路径(或多段线)。这需要脚本遍历每一行,查找要添加到每个路径的数据中的列数。我不知道该怎么做,因为我使用的脚本假设程序员知

这是一个问题的延伸

关于原始问题,从tsv绘制线段的问题已通过解决(感谢@livided)。以下是从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
,等等)


有人知道如何迭代上面的示例,为每行数据绘制路径吗

假设数据在数组
data
中,这将为每个元组创建一个长度可变的数组

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");

完整示例。

这是最优雅的。感谢您的发帖,这教给我的不仅仅是这个问题(我对javascript有点陌生)!
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");