1

Please could someone guide me how to draw a connecting line between two x axis. There are two histograms on the svg and I want to connect two x axis between the data e.g. 1st record (010999) is connecting to 523,524,525,526 vs 6th record (011739) is connecting with 000200 twice or 000200 is connecting twice with 011739.

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

[Image of how it should be looking][1]

Current working code is available here: http://plnkr.co/edit/p3f2o4Zei6QWoNbIkB5Y?p=preview

but I am not sure how to go about connecting lines. Any guidance would be much appreciated.

SharePointer
  • 169
  • 9

1 Answers1

2

Pretty straight-forward unless I'm misunderstanding something. I've added:

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

Here's the result.

o-o
  • 8,158
  • 2
  • 20
  • 21
  • This is great! Thanks. How can change the line type to curve? like Interpolate basic and also x axis ticks not aligned to the bar (y). Do you know how do i fix this? Really appreciate. Thanks – SharePointer Nov 06 '16 at 23:45
  • I've updated the plunker to use cubic beziers (see edited answer). Hardcoding the path's `d` attribute felt like the easier approach as your data defines two points per line. Regarding aligning ticks, this has been answered numerous times (e.g. http://stackoverflow.com/questions/17544546/d3-js-align-text-labels-between-ticks-on-the-axis). If you're still having trouble, post a new question. – o-o Nov 07 '16 at 00:29