How to avoid the line overlapping on node and reroute the line in d3js

Question

I am adding the circles dynamically and maintaining the connection between the circle like this

let drawLine = d3.svg.line().x(d => d[0]).y(d => d[1]);

let path = svg.append('path').
  attr('stroke', 'red').
  attr('stroke-width', 5).
  attr('fill', 'none').
  attr('d', drawLine([[x1, y1], [x2, y2]]));

As i am adding nodes dynamically, if there is any connection overlapped on the node then i want to reroute that line in a different path(Any path that should not overlap on any of the node) Static example

In the above example there are 3 circles and there is connection between 2 big circles. The connected path is overlapped on the one small circle in the middle. so i want to maintain the same connection between those 2 circles but it shouldn't overlap on the nodes. I am new to d3 and i am not sure like d3.svg.line() is correct way to maintain the non overlapping connection between the nodes. Please suggest.

Answer 1

You can use Quadtatic Bezier curve instead:

 let svg = d3.select('#panel') svg.append('circle').attr('r', 40).attr("cx", 50).attr("cy", 50); svg.append('circle').attr('r', 40).attr("cx", 350).attr("cy", 50); svg.append('circle').attr('r', 20).attr("cx", 200).attr("cy", 50); let lineGenerator = d3.svg.line().x(d => d[0]).y(d => d[1]); const quadraticBezierLineGenerator = d => `M ${d[0][0]},${d[0][1]} Q ${(d[0][0] + d[1][0])/2}, ${d[0][1] - 60} ${d[1][0]},${d[1][1]}`; let path = svg.append('path'). attr('stroke', 'red'). attr('stroke-width', 5). attr('fill', 'none'). attr('d', quadraticBezierLineGenerator([[92, 50], [309, 50]]));

 svg { width: 100%; height: 100%; } svg circle { fill: white; stroke: black; stroke-width: 3; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <svg id="panel"></svg>