[Solved]-How to connect a path between 2 points in a grid using D3-d3.js

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.