score:1

Accepted answer

the easiest way to do this is with a path string:

var s = 10        //grid size
var p0 = [10, 15] //start point
var p1 = [20, 25] //end point

var connectionpath = svg.append('path')
  .attr('d', [
    'm', p0[0]*s, p0[1]*s,  //put pen at start point
    'h', p1[0]*s,           //move pen horizontally
    'v', p1[1]*s            //move pen vertically
  ].join(' '))
  .attr('fill', 'none')
  .attr('stroke', '#000')

to adjust when the rectangles are dragged, update the d attribute each time one of the rectangles is dragged.


Related Query

More Query from same tag