Pinning nodes (or groups of nodes) in force layout after drag: .fixed bits …… ∆ ∞

Derived from the D3.js example force_cluster.html and gist 3104394.

Features

• all of gist 3104394 @ github
• keep SHIFT or CTRL pressed when ending a drag move to ‘pin’ the node/group there: SHIFT will ‘pin’ all group nodes; you may drag individual nodes of the group around while they will remain pinned hat way.
• showcases a tweaked ‘miserables.json’ file which includes ‘circular links’ i.e. links which connect node A to node A (~ self-reference)

Known Bugs

• doesn’t work with vanilla d3.layout.force as it would clear out the .fixed member; this code uses an augmented d3.js file. pull request #798
• .fixed PIN state doesn’t correctly propagate/clear when you click nodes to expand/contract them from/to group nodes.

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.