通过直方图上的一条线连接两个 x 轴答案

【问题标题】：Connecting two x axis through a line on histograms通过直方图上的一条线连接两个 x 轴
【发布时间】：2016-11-06 22:26:53
【问题描述】：

请有人指导我如何在两个 x 轴之间画一条连接线。 svg 上有两个直方图，我想在数据之间连接两个 x 轴，例如第一条记录 (010999) 连接到 523,524,525,526，而第六条记录 (011739) 连接到 000200 两次或 000200 连接到 011739 两次。

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

但我不确定如何连接线路。任何指导将不胜感激。

【问题讨论】：

标签： d3.js

【解决方案1】：

非常直截了当，除非我误解了什么。我添加了：

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。

【讨论】：

这太棒了！谢谢。如何将线型更改为曲线？像插值基本和 x 轴刻度未与条形 (y) 对齐。你知道我该如何解决这个问题吗？万分感激。谢谢
我已将 plunker 更新为使用三次贝塞尔曲线（请参阅编辑后的答案）。硬编码路径的d 属性感觉像是更简单的方法，因为您的数据每行定义两个点。关于对齐刻度，这已被多次回答（例如stackoverflow.com/questions/17544546/…）。如果您仍然遇到问题，请发布一个新问题。