CODEWITHSUNDEEP
javascriptcytoscape.jswebcola
kamranjon
kamranjon

Reputation: 53

Force directed Cola layout with Cytoscape similar to Cola example

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.

Upvotes: 2

Views: 2610

Answers (2)

Xr.
Xr.

Reputation: 1410

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...)

Upvotes: 3

maxkfranz
maxkfranz

Reputation: 12250

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/

Upvotes: 1

Related Questions