在直方圖上通過一條線連接兩個x軸

請有人指導我如何繪製兩個x軸之間的連接線。在svg上有兩個直方圖，我想在數據之間連接兩個x軸。第一記錄（010999）被連接到523524525526 VS第六記錄（011739）與000200兩次或000200與兩次連接連接011739.在直方圖上通過一條線連接兩個x軸

1. 010999 000523 
2. 010999 000524 
3. 010999 000525 
4. 010999 000526 
5. 011000 000526 
6. 011739 000200 
7. 011740 000200

[它是如何應該尋找圖像] [1]

當前的工作代碼可在這裏： http://plnkr.co/edit/p3f2o4Zei6QWoNbIkB5Y?p=preview

但我不知道如何去連接線。任何指導將不勝感激。

來源

2016-11-06 SharePointer

非常直截了當，除非我誤解了某些東西。我已添加：

var connections = d3.select("#firstchart").append("g") 
    .attr("class", "connections"); 

    connections.selectAll("path") 
    .data(data) 
    .enter() 
    .append("path") 
    .style("stroke", "#FFCC66") 
    .attr("d", function(d) { 
     return "M "+x1(d.column9)+" 150 C "+x1(d.column9)+" 250,"+x2(d.column10)+" 220 , "+x2(d.column10)+" "+320; 
    });

這是the result。

來源

2016-11-06 23:13:31

這太棒了！謝謝。如何將線型更改爲曲線？如插入基本和X軸刻度不與條（y）對齊。你知道我該如何解決這個問題？萬分感激。謝謝 – SharePointer

我已經更新了使用立方貝塞爾（請參閱編輯答案）。對路徑的「d」屬性進行硬編碼感覺像是更簡單的方法，因爲數據定義每行兩個點。關於對齊滴答，這已被多次回答（例如http://stackoverflow.com/questions/17544546/d3-js-align-text-labels-between-ticks-on-the-axis）。如果您仍然遇到問題，請發佈新問題。 –

在直方圖上通過一條線連接兩個x軸

回答

相關問題