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)
.groups(groups)
.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() }
});
});``````