Moving the mouse will adjust the force layout parameters.
Keep the SHIFT key depressed to change the 3rd/4th parameter
When done, keep CONTROL key depressed to make the code STOP WATCHING YOUR MOUSE MOVEMENTS. I.e. press CONTROL, then move the mouse outside the area covered by the SVG.
All constraints are applied in the force.on(“tick”) event handler.
We also implement drag behaviour, which, like any other use of node.fixed, will add a .px/.py coordinate
pair for each node under the hood. To prevent any ‘Crazy Ivan jumping’ of nodes and other unexpected behaviour, we must ensure that
.x/.y and .px/.py match once we are done in the force.tick handler, otherwise the
next mouseenter/drag will behave very oddly.
It is always a good rule to set both .px/.py and .x/.y when you update force nodes’ x/y coordinates.
This example is derived off the D3 example examples/force/force-collapsible.html.
The code requires a D3 version which includes pull request #803.