Avoid edge-node overlapping in cytoscape.js

Question

Created graph using cytoscape.js. I have set the layout to 'grid'. Need to resolve following problem: original graph-

There is edge from Host3 to Host1 as well as from Host5 to host1,Edge from Host 5 to Host 1 overlapping the edge from Host3 to Host1.

Overlapping edge should appear like:

How to do it? Thanks !

Mondragon

I have come across this problem too, though using the dagre layout. – Lamaism

Just want to add that this is only possible in some specific cases. There are graphs where you cannot find such a non-overlapping drawing in the 2D plane. If you want to know more about planar graphs in general, see for example en.wikipedia.org/wiki/Planar_graph and discretetext.oscarlevin.com/dmoi/sec_planar.html. – Faeroese

Answer 1

That's a research problem in graph theory. You can

(1) use a different layout or parameters, or

(2) develop a layout with less overlap for your specific usecase, or

(3) invent and/or implement novel edge overlap avoidance algorithms.

Splash