block by GerHobbelt 3670903

d3.js: force layout: using custom tick handler to draw a tree/hierarchy

Full Screen

Experiment ……

Controls

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.

Implementation Nodes, er, Notes

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.

index.html

flare.json

sync-d3.sh