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:

cola
    .nodes(graph.nodes)
    .links(graph.links)
    .groups(groups)
    .jaccardLinkLengths(40, 0.7)
    .avoidOverlaps(true)
    .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:

20 initial graph layout iterations without constraints to get the graph to untangle.
0 iterations for structural constraints (none are specified so any iterations here would be the same as the previous step)
10 iterations with non-overlap constraints

Setup for the group visuals is a typical D3 pattern:

var group = svg.selectAll('.group')
    .data(groups)
    .enter().append('rect')
    .classed('group', true)
    .attr({ rx: 5, ry: 5 })
    .style('fill', function (d) { return color(d.id) })
    .call(cola.drag);

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 () {
    ...
    group.attr({
        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() }
    });
});