Javascript d3JS:遍历未知点计数的路径
这是一个问题的延伸 关于原始问题,从tsv绘制线段的问题已通过解决(感谢@livided)。以下是从tsv绘制两条线段的数据: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 现在,我正在尝试绘制顶点数目未知的路径(或多段线)。这需要脚本遍历每一行,查找要添加到每个路径的数据中的列数。我不知道该怎么做,因为我使用的脚本假设程序员知
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");