How to get Cytoscape to place separate node groups closer and avoid overlapping self edges

Question

I have earlier used Springy to generate force directed graphs. It seems to have a very intelligent algorithm for avoiding overlapping nodes or links, and it also uses the available space sparingly:

http://getspringy.com/demo.html

Unfortunately Springy uses jQuery and is not suitable for my current project, and looking for a good replacement. Currently I am experimenting with Cytoscape. I have tried several layouts and Cose-Bilkent seems to be the best so far. However, I also have some problems with that:

• Links to self are drawn on top of others edges which makes them hard to read
• Disconnected node groups are sometimes placed very far away from eachother
• Quite often edges overlap even with low number of nodes and edges (~15).

In a typical case I will have 4-16 nodes & edges. I'm looking for a way to show them in a good looking, compact form with as little overlapping edges as possible.

Settings:

    randomize: true,
    nodeRepulsion: 1000,
    idealEdgeLength: 30,
    gravity: 0.1

I've also tested the following layouts:

• Klay: lots of overlapping edges and sometimes very long edges
• Cola: also lots of overlapping
• Fcose: makes very wide graphs

Euler doesn't seem to work at all, it just hangs my browser.

Answer 1

I don't know the others, but both cose-bilkent and fcose don't consider self-loop edges during their calculations, drawing of the self-loop edges after the layout is more relevant to the cytoscape.js.

Both algorithms don't make an extra effort to reduce edge crossings, but fcose usually does a better job in providing plane embeddings of planar graphs.

One way to reduce the distance between disconnected components is to increase gravity/decrease gravityRange in both algorithms. Furthermore, fcose is expected to produce more compact layouts than cose-bilkent in default settings.