Skip to main content
100%

D3v4 Selectable, Draggable, Zoomable Force Directed Graph

✓ Published0🌍 Public
Aakollegger
Last edited Aug 30, 2017
Created on Aug 30, 2017

This interactive force-directed graph demonstrates multi-node selection and manipulation in D3 v4. Users can click to select a single node, shift-click to toggle individual selection, or shift-drag to select all nodes within a brushed region. Dragging a selected node moves the entire selection group, while dragging an unselected node selects and drags it alone. The graph supports zooming and panning, and uses a modified d3-brush-lite to avoid conflicts with shift-key behaviors in v4. Implemented with SVG rendering, the visualization leverages D3 v4's force layout with `.fx`/`.fy` for node pinning and link accessors for cleaner JSON graph data.

AI-generated description

A detailed description of this example can be found at <a href="http://emptypipes.org/2017/04/29/d3v4-selectable-zoomable-force-directed-graph/">emptypipes.org/2017/04/29/d3v4-selectable-zoomable-force-directed-graph/</a>.

In summary:

  1. Clicking on a node selects it and de-selects everything else.
  2. Shift-clicking on a node toggles its selection status and leaves all other nodes as they are.
  3. Shift-dragging toggles the selection status of all nodes within the selection area.
  4. Dragging on a selected node drags all selected nodes.
  5. 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:

forked from <a href='http://bl.ocks.org/pkerpedjiev/'>pkerpedjiev</a>'s block: <a href='http://bl.ocks.org/pkerpedjiev/f2e6ebb2532dae603de13f0606563f5b'>D3v4 Selectable, Draggable, Zoomable Force Directed Graph</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Selectable Force-Directed Graph

This interactive D3 visualization demonstrates a force-directed network graph where nodes can be repositioned through dragging. Users can select multiple nodes using shift-click or by drawing a selection rectangle, enabling simultaneous movement of grouped nodes. The graph renders as an SVG using d3.forceSimulation, with selection semantics similar to window managers: clicking a node selects it exclusively, while shift-clicking toggles individual nodes. The implementation includes a zooming behavior via a custom d3.svg.brush for rectangular selection and a zoomer for scaling and panning the entire graph.

FFrissAnalytics
91% match
Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics
85% match
Loading thumbnail…

zoomable, draggable force layout with labels

This interactive force-directed graph visualizes a network of 10 nodes labeled A through J, connected by 12 links. The D3 v4 force layout positions nodes with simulated physics, while icons from Font Awesome serve as node labels. The graph supports zooming and panning via the mouse, and individual nodes can be dragged to reposition the network. A slider control adjusts a value, and a "remove" button deletes nodes. Node size, color, and stroke vary, and the entire layout responds dynamically to user interaction.

Aaaronbalthaser
83% match
Loading thumbnail…

Navigate and Zoom around graph

This interactive graph visualization uses a force-directed layout to arrange nodes connected by links. Users can pan by clicking the background, zoom with the mousewheel, and drag individual nodes. Middle-clicking a location adds a new node at that point. The d3.v3 library provides the force simulation, zoom behavior, and drag interactions, while nodes and links are rendered as SVG elements. The graph displays a network with labels on each node, and buttons allow freezing, thawing, or fitting the graph to the viewport.

FFrissAnalytics
82% match
Loading thumbnail…

Zoomable Force Directed Graph d3v4

This graph uses a force-directed layout to arrange a network of named characters, with gray links showing relationships and black circles for nodes. Users can zoom and pan the entire visualization via mouse interactions. The example is built with d3.v4, using d3.forceSimulation with d3.forceLink and d3.forceManyBody, and renders to SVG. The node and link data are hardcoded in the script, with links flagged as allies or enemies.

FFrissAnalytics
82% match
Loading thumbnail…

zoomable, draggable force layout with labels

This interactive force-directed graph displays ten labeled nodes (A through J) connected by links, with Font Awesome icons as labels overlaid on colored circles. The layout uses D3 v4’s `d3.forceSimulation` for physics-based positioning, combined with `d3.drag` for node dragging and `d3.zoom` for canvas zoom and pan. Node positions are bounded within the SVG viewport, and an HTML slider controller adjusts an external value. The black background, custom fonts, and Bootstrap controls frame the visualization, which reads node and edge data from a local `data.json` file.

FFrissAnalytics
82% match
Loading thumbnail…

Draggable Network II

This interactive network visualization uses a force-directed layout to display a graph with 80 nodes and numerous links. Users can select individual nodes or drag a rectangular brush across the background to select multiple nodes, with the SHIFT key toggling additional selections. Once selected, nodes can be dragged to reposition, with connected links updating in real-time via the `d3.drag` and `d3.brush` APIs. Arrow keys also nudge selected nodes incrementally. The example demonstrates customizing a force-directed layout through manual adjustment, using the D3.js v4 library and rendering to SVG.

Mmbostock
82% match
Loading thumbnail…

force graph with zoom and drag

This example demonstrates a force-directed graph that can be zoomed and dragged. A circle within an SVG group responds to mouse interaction, with the SVG changing its cursor style to indicate draggable zones. The visualization uses D3 v6 to create three separate SVG elements, applies a linear color scale mapping scores to colors like lime, yellow, and red, and employs a power scale for sizing nodes. A zoom effect is implemented via `d3.zoom()`, which updates the SVG’s transform attribute on zoom events.

Ssgzzhinde
81% match