charts - 带有 D3.js 的阶梯线图，带有单独的线条

Question

我是 D3 初学者，我想画一个阶梯线图。但不是路径！我需要单独的线路，所以我需要一个“手动”步进线。我的问题是如何绘制垂直线？

我画这样的水平线：

var g = svg.append("g").attr("class", "line");
g.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("x1", function(d,i) { return x(d[0]);})
.attr("y1", function(d,i) { return y(d[1]);})
.attr("x2", function(d,i) { return x(d[2]);})
.attr("y2", function(d,i) { return y(d[1]);})
.attr("class", "line")
.style("stroke", "black")

我的数据集看起来像（示例）：

[
'2011-01-04T00: 00: 00.000',
6975.35009765625,
'2011-01-03T00: 00: 00.000',
6989.740234375
],
[
'2011-01-05T00: 00: 00.000',
6939.81982421875,
'2011-01-04T00: 00: 00.000',
6975.35009765625
],

所以：

d[0] = actual date
d[1] = actual data
d[2] = previous date
d[3] = previous data

现在我试图找出我需要将垂直线绘制到下一个 x 值的方向。如果下一个 x 值更高，则线必须上升，如果下一个 x 值更低，则线必须下降。

任何人都可以帮助我吗？

Answer 1

您基本上已经拥有它 - 您的代码需要类似于

.attr("x1", function(d) { return x(d[0]); })
.attr("y1", function(d) { return y(d[1]); })
.attr("x2", function(d) { return x(d[0]); })
.attr("y2", function(d) { return y(d[3]); })

您无需检查线是向上还是向下，因为这隐含在坐标中。