带有 D3.js 的阶梯线图，带有单独的线条答案

【问题标题】：Stepline Chart with D3.js with individual lines带有 D3.js 的阶梯线图，带有单独的线条
【发布时间】：2013-06-03 07:13:11
【问题描述】：

我是 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 值较低，则该线必须下降。

谁能帮帮我。

【问题讨论】：

您是否考虑过使用带步进插值的线生成器？见the docs。
插值方法是否只针对路径元素？！
是的。我的意思是，您可以使用单个线（或路径）生成器来实现相同的效果，而不是单独绘制所有线段。
我知道，但我需要为每一步/打勾单独一行，因为每一行都会单独格式化。

标签： charts d3.js linechart

【解决方案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]); })

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

【讨论】：