Empty Pipes

Selectable Force-Directed Graph Using D3.js

Dragging multiple nodes in a force-directed graph layout is useful
for making large changes in its arrangement. Mike Bostock
showed a nice example of this while describing the process
of creating the 2013 Oscar
Contenders
visualization in his Eyeo talk about examples.

His example, while instructive and useful, can be made even more
helpful by adding the dynamic force calculation, as well as zooming
and centering behaviour.

In the example below, hold down shift to select multiple
nodes or press the ‘c’ key to center the graph. Zooming and panning
follow the typical pattern using the mousewheel and dragging.

The selection process is made to emulate the behaviour of selection
and dragging that is seen in most file managers and is thus familiar
to most users of desktop computers:

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.

Finally, the cursor is changed to a crosshair when the user presses
the shift key.