Fixed Node Positions

Fixing the positions of nodes

In webcola (as in D3 force layout), you can fix/lock the positions of nodes to a particular x,y coordinate. This is used behind the scenes by the drag handler that is applied as in the following example:

    var node = svg.selectAll(".node")
        .data(graph.nodes)
      .enter().append("circle")
        .attr("class", "node")
        .call(d3cola.drag);

This is an excerpt from this example: http://marvl.infotech.monash.edu/webcola/examples/unconstrained.html

However, the default drag handler does not "lock" the position of nodes, so when you release the mouse button, the node is free to float around again. In the following we add a click handler that sets the fixed property to true, causing the node to stay locked in position even on mouse up.

    var node = svg.selectAll(".node")
        .data(graph.nodes)
      .enter().append("circle")
        .attr("class", "node")
        .on("click", function (d) { d.fixed = true })
        .call(cola.drag);

You can also set the x and y explicitly on a given node and also set fixed = true such that it is locked precisely at that position. It will not move unless required to do so in order to satisfy hard constraints.