是的。首先,我将重组您的数据以便于迭代,如下所示:
var series = [
[{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 8}],
[{time: 1, value: 5}, {time: 2, value: 9}, {time: 3, value: 12}],
[{time: 1, value: 3}, {time: 2, value: 2}, {time: 3, value: 2}],
[{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 15}]
];
现在你只需要一个通用行:
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.time); })
.y(function(d) { return y(d.value); });
然后,您可以一次性添加所有路径元素:
group.selectAll(".line")
.data(series)
.enter().append("path")
.attr("class", "line")
.attr("d", line);
如果您想让数据结构格式更小,您还可以将时间提取到一个单独的数组中,然后使用二维数组作为值。那看起来像这样:
var times = [1, 2, 3];
var values = [
[2, 4, 8],
[5, 9, 12],
[3, 2, 2],
[2, 4, 15]
];
由于矩阵不包含时间值,因此您需要从行生成器的 x 访问器中查找它。另一方面,y 访问器被简化,因为您可以将矩阵值直接传递到 y 尺度:
var line = d3.svg.line()
.interpolate("basis")
.x(function(d, i) { return x(times[i]); })
.y(y);
创建元素保持不变:
group.selectAll(".line")
.data(values)
.enter().append("path")
.attr("class", "line")
.attr("d", line);