A detailed description of this example can be found at emptypipes.org/2017/04/29/d3v4-selectable-zoomable-force-directed-graph/.
In summary:
- Clicking on a node selects it and de-selects everything else.
- Shift-clicking on a node toggles its selection status and leaves all other nodes as they are.
- Shift-dragging toggles the selection status of all nodes within the selection area.
- Dragging on a selected node drags all selected nodes.
- Dragging an unselected node selects and drags it while de-selecting everything else.
Upgrading selectable zoomable force directed graph implementation to D3 v4 required a few minor and not-so-minor changes.
- The new brush in v4 captures the shift, alt and meta keys to perform some
actions by default. To get around this, I forked
d3-brush
and modified it so that it doesn't capture the shift events. The new version (d3-brush-lite) can be found on github. There is an open github issue to disable this behavior ind3-brush
. - Because the d3-drag behavior consumes all events in v4, it is no longer necessary to stop propagation.
- The brush creates its own overlay which catches all events meaning that we don't need to turn the zoom behavior off when the shift key is pressed.
- Whether a node is fixed is specified by the
.fx
and.fy
parameters. This eliminates the need to set the.fixed
parameter on each node. - The force layout in v4 lets us specify an accessor for the nodes that a link connects. This lets us use ids for a link's endpoint and makes the graph specification JSON easier to read:
Because it's based on the GPL-licensed Force-Directed Graph block then this code is GPL as well.