Search code examples
javascriptcytoscape.jswebcola

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.

Solution

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