How can I make edges in Cytoscape.js not intercept?

Question

I am using Cytoscape library to make graph, and I am using this settings

  layout: {
    name: 'cose',
        idealEdgeLength: 100,
        nodeOverlap: 20,
        refresh: 20,
        fit: true,
        padding: 30,
        randomize: false,
        componentSpacing: 50,
        nodeRepulsion: 400000,
        edgeElasticity: 100,
        nestingFactor: 5,
        gravity: 300,
        numIter: 1000,
        initialTemp: 200,
        coolingFactor: 0.95,
        minTemp: 1.0
  },

Graph is OK, but edges are intercepting each other sometimes, and I need to refresh a graph several times or rearange it to get good looking graph. Is is possible to force Cytoscape to not intercept edges while rendering it?

score 1 · Answer 1 · answered Jan 22 '18 at 18:59

A force-directed layout is a physics simulation that sets per-element forces to constrain the results. The relative edge lengths often have meaning (e.g. weights) associated with them, and you often want to see the natural clustering. Avoiding edge crossings with those things in mind would often create conflicts.

Graphviz and Mathematica have planar layouts, and you could port them to Cytoscape layout extensions if you like. You will lose the benefits of a force-directed layout, however.

See also:

score 1 · Accepted Answer · answered Mar 12 '18 at 21:47

This solution solved my problem called "cose-bilkent".

  layout: {
    name: 'cose-bilkent',
        animate: false
  },

It is not included in the official release and additional library should be included https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.6.5/cytoscape-cose-bilkent.js

The demo is here http://js.cytoscape.org/demos/6c9907e7896f8ae23f9f/

How can I make edges in Cytoscape.js not intercept?

2 Answers2