具有单独行的D3.js的阶梯图

Question

我是D3-Beginner，我想画一个Stepline-Chart。但不是路径！我需要单独的线路，所以我需要一个“手动”的步骤线。 我的问题是如何绘制垂直线？

我画这样的水平线：

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]); })

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