cola.js home

Simple Groups Example

A very simple use of rectangular groups with no nesting. Both nodes and groups are draggable. Telling cola about the groups is like so:
    .jaccardLinkLengths(40, 0.7)
    .start(20, 0, 10);
In the above, groups is an array where each group object contains a single property leaves which is an array of indices to the graph.nodes array. We turn on avoidOverlaps to get cola to keep the nodes and groups separated. The start method is called with three parameters 20, 0 and 10. These are, respectively: Setup for the group visuals is a typical D3 pattern:
var group = svg.selectAll('.group')
    .classed('group', true)
    .attr({ rx: 5, ry: 5 })
    .style('fill', function (d) { return color( })
In the tick event handler we need to resize groups as well as moving them. Cola puts this information into the bounds property on each group:
cola.on('tick', function () {
        x: function (d) { return d.bounds.x },
        y: function (d) { return d.bounds.y },
        width: function (d) { return d.bounds.width() },
        height: function(d) { return d.bounds.height() }