3

这个问题是关于线段的原始问题的扩展。

关于最初的问题，从 tsv 绘制线段的问题已经用这个脚本解决了（感谢@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

有没有人知道如何遍历上面的示例，为每行数据绘制路径？

4

1 回答 1

2

假设数据在数组中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");

完整的例子在这里。

于 2014-01-15T21:05:16.743 回答