The Cola.js physics simulation layout for Cytoscape.js
The cola
layout uses a force-directed physics simulation with several sophisticated constraints, written by Tim Dwyer. For more information about Cola and its parameters, refer to its documentation.
It supports noncompound and compound graphs well.
- Cytoscape.js ^2.4.0
- Cola.js ^3.1.2
Download the library:
- via npm:
npm install cytoscape-cola
, - via bower:
bower install cytoscape-cola
, or - via direct download in the repository (probably from a tag).
require()
the library as appropriate for your project:
CommonJS:
var cytoscape = require('cytoscape');
var cycola = require('cytoscape-cola');
var cola = require('cola');
cycola( cytoscape, cola ); // register extension
AMD:
require(['cytoscape', 'cytoscape-cola', 'cola'], function( cytoscape, cycola, cola ){
cycola( cytoscape, cola ); // register extension
});
Plain HTML/JS has the extension registered for you automatically, because no require()
is needed.
Call the layout, e.g. cy.layout({ name: 'cola', ... })
, with options:
var defaults = {
animate: true, // whether to show the layout as it's running
refresh: 1, // number of ticks per frame; higher is faster but more jerky
maxSimulationTime: 4000, // max length in ms to run the layout
ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
fit: true, // on every layout reposition of nodes, fit the viewport
padding: 30, // padding around the simulation
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
// layout event callbacks
ready: function(){}, // on layoutready
stop: function(){}, // on layoutstop
// positioning options
randomize: false, // use random node positions at beginning of layout
avoidOverlap: true, // if true, prevents overlap of node bounding boxes
handleDisconnected: true, // if true, avoids disconnected components from overlapping
nodeSpacing: function( node ){ return 10; }, // extra spacing around nodes
flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
// different methods of specifying edge length
// each can be a constant numerical value or a function like `function( edge ){ return 2; }`
edgeLength: undefined, // sets edge length directly in simulation
edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
edgeJaccardLength: undefined, // jaccard edge length in simulation
// iterations of cola algorithm; uses default values on undefined
unconstrIter: undefined, // unconstrained initial layout iterations
userConstIter: undefined, // initial layout iterations with user-specified constraints
allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
// infinite layout options
infinite: false // overrides all other options for a forces-all-the-time mode
};
This project is set up to automatically be published to npm and bower. To publish:
- Set the version number environment variable:
export VERSION=1.2.3
- Publish:
gulp publish
- If publishing to bower for the first time, you'll need to run
bower register cytoscape-cola https://github.com/cytoscape/cytoscape.js-cola.git