Skip to content
Oliver edited this page Mar 7, 2017 · 6 revisions

Constraints are set as follows:

d3cola.constraints(myconstraints);

myconstraints is an array containing associative arrays, each of which represents a constraint. Some examples of each type of constraint are given below.

Alignment constraints

{
    "type": "alignment",
    "axis": "x",
    "offsets": [
        {"node": "1","offset": "0"},
        {"node": "2", "offset": "0"},
        {"node": "3", "offset": "0"}
    ]
}

This will ensure that the nodes in d3cola.nodes() with indices 1, 2, and 3 will all have their centres aligned along the x-axis.

An "offset" of 0 will make all the nodes in the alignment be precisely aligned by their centers. Non-zero offsets can be specified to make nodes align by displacements from their centers. For example, to force a bunch of nodes of different widths to be aligned by their left-hand-sides, specify an offset for each node proportional to half its width.

Inequality constraints

{"axis":"y", "left":0, "right":1, "gap":25}

This says that the center of graph.nodes[0] must be at least 25 pixels above the center of graph.nodes[1]. To be more precise, it is an inequality constraint that requires:

graph.nodes[0].y + gap <= graph.nodes[1].y

For more information on inequality separation constraints, for now see:

Known issues:

Equality constraints

You can turn an inequality constraint into an equality one simply by adding an extra attribute like this:

{"axis":"x", "left":0, "right":1, "gap":30, "equality":"true"}

This would impose the constraint:

graph.nodes[0].x + 30 == graph.nodes[1].x

Group constraints

FIXME; for now see http://marvl.infotech.monash.edu/webcola/examples/smallgroups.html

Separation constraints

FIXME; for now see http://marvl.infotech.monash.edu/webcola/examples/pageBoundsConstraints.html