Force directed Cola layout with Cytoscape similar to Cola example

Question

I am using cytoscape.js and the cola extension and I am interested in creating a layout similar to this example.

There is an example of using cola with cytoscape.js on the website, but they do not have this non-overlapping functionality.

I tried the infinite:true option, but it does not appear to work as expected. I am wondering how this is achieved with cytoscape.js and cola.

Thanks.

score 3 · Accepted Answer · answered Mar 22 '17 at 08:48

3

Use the infinite: true parameter as you first tried. You will also want the fit: false parameter in order to be able to zoom and pan.

For example:

var cy = cytoscape({
    container: $('#cy'),
    elements: /*...*/,
    layout: {
        name: 'cola',
        infinite: true,
        fit: false
    }
});

I made a working example here: http://codepen.io/anon/pen/EWEOKw (you need to load in HTTP: I did not find an HTTPS CDN for cola...)

answered Mar 22 '17 at 08:48

Xr.

1,410
13
23

Thanks so much! So I discovered that the demo I was tweaking, the cola example from the cytoscape.js github repo - is actually using an old version of cytoscape-cola 1.1.1 - and by using the 1.5.0 version that you are using I was able to get the expected results! – kamranjon Mar 22 '17 at 15:25

score 1 · Answer 2 · answered Mar 21 '17 at 21:28

1

Overlap avoidance is a built-in feature of Cola. Unless you specify particular options that make overlap avoidance impossible, Cola will produce results where the nodes do not overlap.

You can use nodeSpacing to specify extra space around the nodes. Increasing the value makes the nodes more spaced out as the demo shows: http://js.cytoscape.org/demos/2ebdc40f1c2540de6cf0/

answered Mar 21 '17 at 21:28

maxkfranz

11,896
1
27
36

I am using the default settings form the cytoscape-cola github repo - Maybe I am not understanding how to achieve the example from cola above. Do I need to bind some event to re-initialize the layout on the movement of my individual nodes? It seems that after the layout has settled, the nodes are able to overlap each other again. – kamranjon Mar 21 '17 at 23:11
As the user pushes and pulls the nodes, I would like the surrounding nodes to move out of the way, and conversely be pulled around - none of the examples on cytoscape website show this so I am unsure how it is achieved with the library. – kamranjon Mar 22 '17 at 01:54

Force directed Cola layout with Cytoscape similar to Cola example

2 Answers2