Draw path to join two nodes without intersect other node + d3.js

Question

I am using d3-flow-tree (here) for displaying my tree's node as flow layout. And add other g -element to represent connection between two nodes (by managing other chart with flow -layout).

When drawing links from one node to other it's must be rectangular path that not intersect other node like attached image

need to find possible available path. any suggestion and ideas are welcome.

Thanks in advance

Answer 1

It looks WebCola can do that. You can take a look at their demo: https://ialab.it.monash.edu/webcola/examples/unix.html

there the author mentioned: "Another feature of this example is shortest-path edge routing. That is, after layout stops, the edge paths are routed to avoid passing through node boundaries." and he also explained how it is achieved.