D3 Examples - D3v4 Selectable, Draggable, Zoomable Force Directed Graph

D3v4 Selectable, Draggable, 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 in d3-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:

xxxxxxxxxx
 
  <!DOCTYPE html>
    <head>
          <meta charset="utf-8" />
</head>
<div align='center' id="d3_selectable_force_directed_graph" style="width: 960px; height: 500px; margin: auto; margin-bottom: 12px">
    <svg />
</div>
​
<link rel='stylesheet' href='d3v4-selectable-zoomable-force-directed-graph.css'>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="d3v4-brush-lite.js"></script>
<script src="d3v4-selectable-force-directed-graph.js"></script>
​
<script>
    var svg = d3.select('#d3_selectable_force_directed_graph');
​
    d3.json('miserables.with-ids.json', function(error, graph) {
        if (!error) {
            //console.log('graph', graph);
            createV4SelectableForceDirectedGraph(svg, graph);
        } else {
            console.error(error);
        }
    });
</script>
    