在直方图上通过一条线连接两个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轴

回答

相关问题