How to improve spacing in 'cose' layout in cytoscape.js?

Question

I'm using cytoscape.js 2.3.9 and I'm playing with some layouts. I'm now rendering about 150 nodes, but I wish to go up till 1000-1500. There are about 25 nodes with 1-50 posible childs. My best approach for what I need has been with 'cose' layout, but I'm quite far from my final expected result.

I've tried several configurations playing with its attributes values as documented, but I'm no so much in force directed simulations and feel like trying without much sense.

With this config:

layout: {
  'name':'cose', 
  'animate':false, 
  'refresh':.1,
  'edgeElasticity' : 20,
  'fit': true,
  'gravity' : 100     
}

I get this result (red line shows the size of the containing div):

I wish the graph fits better, leaving less blank space and child nodes to be closer to its parent. Sometimes with few elements fits better (but not always), like this:

But even so some child nodes overlap its parent and others get so far.

Any advice on attributes values or any other layout that fit better on my purpouse?

Thank you.

Answer 1

As is the nature of force-directed/physics-sim layouts, you have to tailor the force values to your particular data. My suggestion is to copy-paste the example in the docs for cose; it uses the default values.

Experiment by changing each value independently, and see what effect you get.

Unfortunately, there is no one-size-fits all set of force values, but we've tried to set defaults that work OK for most data we've seen.