Experiment …… ? 8
Derived from the D3.js example force_cluster.html and gist 3104394.
Features
- all of gist 3104394 @ github
- showcases a tweaked ‘miserables.json’ file which includes ‘circular links’ i.e. links which connect node A to node A (~ self-reference)
Usage
- Slide the ‘debug level’ slider to see the various debug levels visually; the hospital curves are (top): force.alpha and (bottom) total x/y change squared: a measurement for the amount of movement of nodes in the graph. Note that the bottom curve is inverted, so that when both meet, you’re getting close to done. :-)
- Click on node to expand or collapse. When a node has ‘bundled’ outgoing links, the first click will expand only those (a.k.a. 2nd display mode / expand state = 1), the next click will then expand the group node itself.
- Click on hull (which shows up when you expanded a group node) to collapse the group.
- Drag node to move entire graph around.
Notes
The ability to draw circular references is following the overall force design used here,
where helper nodes (and ditto links) are used to produce the bezier-based links;
a self-reference is nothing but yet another nodeA -> helper -> nodeB link chain where
‘nodeB’ just happens to be nodeA again.
This code uses two(2) d3.layout.force() forces: one to layout the original nodes (or their group node equivalent),
the second is used to layout all the helper nodes (which are only visible in debug modes 1 and 2): the latter are
used to construct the bezier paths representing the links.