Question

请有人指导我如何在两个x轴之间画一条连线。 svg上有两个直方图，我想在数据之间连接两个x轴。第一记录（010999）连接到523,524,525,526与第6记录（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

但我不确定如何连接线路。任何指导都将非常感谢。

Answer 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轴

1 个答案: