Stepline Chart with D3.js with individual lines

我是D3初學者，我想畫一個Stepline-Chart。但不是路徑！我需要單獨的行，所以我需要一個「手動」步伐。我的問題是如何繪製垂直線？Stepline Chart with D3.js with individual lines

我畫的水平線是這樣的：

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值越低，該線必須下降。

請問任何人都可以幫助我。

來源

2013-06-03 maker23

您是否考慮過使用帶有階梯插值的直線生成器？請參閱[文檔]（https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate）。 –

插值方法僅適用於路徑元素嗎？！ – maker23

是的。我所說的是，你可以用一個單行（或路徑）生成器實現相同的效果，而不是單獨繪製所有的段。 –

你基本上它已經 - 你的代碼需要像

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

你並不需要檢查線路是否或進入上下，因爲這是在座標隱。

來源

2013-06-03 11:42:11

Stepline Chart with D3.js with individual lines

回答

相關問題