Connecting line from one svg shape to other svg shapes when clicked using d3

Question

I'm trying to connect two svg shapes using a line. When the svg rect that is blue is clicked it gets initial start position for the line. The second shape that is clicked that is also blue gets final position. How can I draw this data to the path so I can connect the two rects? Any help will be appreciated.

 var init_x; var init_y; var nextClick = false; function myFunction(clicked_id) { const svg = d3.selectAll('svg'); const num_g_children = svg.node().children.length; const g = svg.append('g').attr('transform',`translate(0,${num_g_children*35})`); g.append('rect').attr('id','node_block_' + clicked_id).attr('x',50).attr('y',20).attr('rx',20).attr('ry',20).attr('width',145).attr('height',95).attr('transform','translate(0,-15)').attr('style','fill:white;stroke:black;stroke-width:5;cursor:grab;'); g.append('rect').text('node_output').attr('id','node_output_' + clicked_id).attr('width',10).attr('height',10).attr('transform','translate(50,49)').attr('style','cursor:pointer;fill:blue;stroke-width:3;stroke:black;').on('click',setLine); var dragcontainer = d3.drag().on("drag", function(d, i) { d3.select(this).attr("transform","translate(" + (dx = d3.event.x) + "," + (dy = d3.event.y) + ")"); }); d3.selectAll('g').datum({x: 0, y: 0}).call(dragcontainer); } function setLine(){ var g = d3.selectAll('svg').select('g'); if(nextClick == false) { init_x = d3.event.x; init_y = d3.event.y; nextClick = true; } else { var final_x = d3.event.x; var final_y = d3.event.y; var linesData = [{x: init_x,y: init_y},{x: final_x,y: final_y}]; var lines = d3.svg.line().x(function (d) { return dx; }).y(function (d) { return dy; }) g.append('path').attr('id','line_' + this.id).attr('d',lines(linesData)).attr('style','cursor:pointer;stroke-width:6;stroke:green;'); nextClick = false; } }

 .container { padding: 1px; background-color: grey; } svg { background-color: lightgray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <div class="container"> <a class="btn-small" id="rectA" onclick="myFunction(this.id);">A</a> <a class="btn-small " id="rectB" onclick="myFunction(this.id);">B</a> </div> <svg class="myViewbox" id="viewBoxId" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"></svg>

Answer 1

This was specifically what I was looking for took a while to find this library. Works like a charm. If anybody else has trouble with this I hope this helps.

 var start_id; var nextClick = false; function myFunction(clicked_id) { const svg = d3.selectAll('svg'); const num_g_children = svg.node().children.length; const g = svg.append('g').attr('transform',`translate(0,${num_g_children*35})`); g.append('rect').attr('id','node_block_' + clicked_id).attr('x',50).attr('y',20).attr('rx',20).attr('ry',20).attr('width',145).attr('height',95).attr('transform','translate(0,-15)').attr('style','fill:white;stroke:black;stroke-width:5;cursor:grab;'); g.append('rect').text('node_output').attr('id','node_output_' + clicked_id).attr('width',10).attr('height',10).attr('transform','translate(50,49)').attr('style','cursor:pointer;fill:blue;stroke-width:3;stroke:black;').on('click',setLine); var dragcontainer = d3.drag().on("drag", function(d, i) { d3.select(this).attr("transform","translate(" + (dx = d3.event.x) + "," + (dy = d3.event.y) + ")"); }); d3.selectAll('g').datum({x: 0, y: 0}).call(dragcontainer); } function setLine(){ var g = d3.selectAll('svg').select('g'); if(nextClick == false){ start_id = this.id; nextClick = true; } else{ var end_id = this.id; new LeaderLine(document.getElementById(start_id), document.getElementById(end_id), {startPlug:"square",endPlug:"square",startPlugSize:.4,endPlugSize:.4,color:"blue", size: 6}); nextClick = false; } }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/leader-line@1.0.5/leader-line.min.js"></script> <div class="container"> <a class="btn-small" id="rectA" onclick="myFunction(this.id);">A</a> <a class="btn-small " id="rectB" onclick="myFunction(this.id);">B</a> </div> <svg class="myViewbox" id="viewBoxId" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"></svg>