Derived from the D3.js example force_cluster.html
- 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.
-
network()
is the one who takes care of (re)generating the nodes and links from the original data, based on theexpand[]
info, i.e. which group(s) should be shown in expanded 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 thenetwork()
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 aforementionedforce
parameters.
Wow, in my 600 years+ as a vampire I've never seen such a beautiful graph. I have two questions, though.
(1) Can some nodes within a group be without links? When I remove connections from miserables.json, nodes spread in different directions inside the group. Is it possible to have them very close to each other inside the group?
(2) Can a link width that connects two node groups be a sum of link values connecting two groups?