CODEWITHSUNDEEP
cytoscape.js
tputkonen
tputkonen

Reputation: 5729

Cytoscape.js & cose-bilkent: optimal parameters for preventing node & edge overlapping

I need to draw relatively small (max 20 nodes) network graphs with Cytoscape.js. Most of the time the graphs look nice, but sometimes there are problems. Sometimes nodes are located too close or there are other issues. Below a couple of examples:

example 1

example 2

Often some edges also overlap, even though it should not be difficult to lay out the nodes so that no overlapping occurs.

I've been experimenting with the parameters, however since there are so many variables it has been very difficult to find out an optimal combination.

Parameters I'm using ATM:

cy.layout({
  name: "cose-bilkent",
  animate: false,
  idealEdgeLength: 30,
  quality: "proof",
  randomize: false,
  nodeDimensionsIncludeLabels: true,
  nodeRepulsion: 7000,
  edgeElasticity: 0.45,
  nestingFactor: 0.1,
  numIter: 30000,
  gravity: 0.25,
  tile: true
}).run();

What should I tweak?

EDIT:

A couple of example images to Stephan (please see the comment):

demo 1 demo 2

Upvotes: 1

Views: 1208

Answers (1)

Hasan Balcı
Hasan Balcı

Reputation: 1088

Neither cose-bilkent nor fcose has a mechanism to prevent edge overlaps. It is actually hard to achieve in force-directed layout algorithms. On the other hand, these two algorithms try to prevent node overlaps as far as possible, but it can happen rarely especially if the graph is dense.

One way to reduce the chance of overlap is to increase the idealEdgeLength parameter in both algorithms which will keep the nodes more seperate. Also use randomize: true if there is no reason to prevent applying layout from scratch. But I suggest you use fcose algorithm if your graph is planar (or near-planar) because fcose usually does a better job in providing plane embeddings of planar graphs.

Upvotes: 3

Related Questions