Experiment …… ∆ ∞

Derived from the D3.js example force_cluster.html

Usage

• Click on node to expand or collapse.
• Click on hull (which shows up when you expanded a group node) to collapse the group.
• Drag node to move entire graph around.

Notes

• network() is the one who takes care of (re)generating the nodes and links from the original data, based on the collapse[] info, i.e. which group(s) should be shown in collapsed form and which shouldn’t.

• only group nodes are expected to a .size attribute (read: your own JSON should use that attribute for any node). Same goes for the fields .group_data and .link_count: all of these are expected to be generated by the network() call. (.group_data is a reference to the group (x/y/size/link_count) for a node, group_node.link_count counts the number of links between groups.)

• you’ll very probably have to tweak .gravity, .charge, .linkDistance and maybe also .linkStrength to make your own graphs look good. Compare the final layout of this graph with the ones produced by the v2.9.6 force_cluster.html D3 code: note the generally quite different position of the groups which have only a single link to other groups; that and other differences are all due to the 4 aforementioned force parameters.