Skip to main content
SimilarExport ZIP
100%

D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.

✓ Published0🌍 Public
PPacsangon
Last edited Mar 2, 2016
Created on Jul 27, 2016

This interactive tree visualization demonstrates a collapsible, draggable hierarchy using D3.js v3 with SVG rendering and animated transitions. The root "flare" node is fixed, while any other node can be dragged and dropped onto a new parent, changing the tree structure. Panning occurs by dragging empty space or pushing nodes toward the edge, while zooming uses double-clicks or the mouse wheel, with shift+double-click to zoom out. The tree auto-sizes to fit the viewport, and the code builds the diagram with `d3.layout.tree`, `d3.svg.diagonal`, and JSON data from `flare.json`.

AI-generated description

This example pulls together various examples of work with trees in D3.js.

The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.

One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.

Dragging can be performed on any node other than root (flare). Dropping can be done on any node.

Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.

Zooming is performed by either double clicking on an empty part of the SVG or by scrolling the mouse-wheel. To Zoom out hold shift when double-clicking.

Expanding and collapsing of nodes is achieved by clicking on the desired node.

The tree auto-calculates its sizes both horizontally and vertically so it can adapt between many nodes being present in the view to very few whilst making the view managable and pleasing on the eye.

For any help/queries, http://www.robschmuecker.com @robschmuecker or robert.schmuecker at gmail dot com

Similar vizzes

Loading thumbnail…

D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.

This example demonstrates an interactive, collapsible tree visualization built with D3.js v3, rendered as SVG with smooth animated transitions. It allows users to drag and drop any node (except the root) onto another node to reorganize the hierarchy, while double-clicking, scrolling, or edge-dragging enables zooming and panning across the entire view. The tree layout automatically recalculates its dimensions to fit the available space, and node expansion or collapse is triggered by clicking. The data is loaded from a JSON file (flare.json) using `d3.json`, with layout handled by `d3.layout.tree` and `d3.svg.diagonal` for link paths.

TThanaporn-sk
92% match
Loading thumbnail…

D3 dndTree + Zoom + Pan + Misc Features

This interactive D3.js v3 visualization presents a hierarchical tree layout of the "flare" JSON dataset, enabling user-driven exploration of the data structure. The visualization supports drag-and-drop node repositioning, panning by dragging the background or near edges, and zooming via mouse-wheel or double-click. Nodes can be clicked to expand or collapse their children. The code uses `d3.layout.tree` for layout, `d3.behavior.zoom` for zoom interactions, and demonstrates custom event handling for pan and drag operations. The tree dynamically calculates horizontal and vertical dimensions to fit the viewport, and all interactions are rendered as SVG with animated transitions.

TThanaporn-sk
88% match
Loading thumbnail…

dndTree

This example shows an interactive zoomable and pannable tree diagram that visualizes the hierarchical structure of the flare JSON dataset. The visualization supports drag-and-drop repositioning of nodes, with ghost circle indicators and animated path updates during the operation. Built with D3 v3, it uses `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` to render SVG nodes and links. The diagram automatically sorts nodes alphabetically and includes panning near the viewport edges while dragging.

Rrainyrainyguo
87% match
Loading thumbnail…

Untitled

This example demonstrates an interactive, zoomable tree diagram built with D3.js, presenting hierarchical data from a JSON file. Users can pan and zoom the tree, as well as drag and drop nodes to rearrange them, with animations using `d3.layout.tree` and `d3.svg.diagonal`. The code includes custom panning logic and a zoom listener with scale constraints, rendering the visualization as SVG elements with linked paths and draggable node circles.

Ppo-drik
84% match
Loading thumbnail…

Collapsible Tree Version 4

Using D3.js v3, this collapsible tree visualization presents hierarchical data from a JSON file with an animated, interactive layout. Users can click nodes to expand or collapse subtrees, with smooth transitions applied via `d3.svg.diagonal` paths and CSS styling. The tree is rendered as an SVG, while `d3.behavior.zoom` and drag-and-drop interactions enable panning and repositioning of nodes within the 900×900 pixel viewport.

Rrainyrainyguo
83% match
Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive tree diagram displays hierarchical data from a nested JSON file, with each node rendered as a labeled rectangle. The visualization shows a collapsible hierarchy where nodes can be expanded or collapsed to explore the data structure. Built with D3.js v3 and jQuery, the example uses SVG rectangles and animated transitions for the tree layout. Link labels indicate relationships between parent and child nodes, while node types are color-coded. The code implements custom zoom and drag behavior through D3’s zoom utility, and includes tooltips for additional information.

Cchoey1324@gmail.com
83% match
Loading thumbnail…

D3.js collapsible tree with boxes

This interactive visualization presents a hierarchical tree as a series of collapsible boxes, using a JSON data structure to define nodes with properties like type, version, and link direction. The layout, built with `d3.layout.tree`, positions nodes vertically, while SVG rectangles and text display the node labels. Users can click nodes to expand or collapse the hierarchy, with animated transitions and colored boxes indicating different node types. The implementation uses the `d3.behavior.zoom` feature for panning and zooming, and SVG definitions for arrows and drop shadows, all rendered within an SVG container managed by D3.js v3.

SSubhas Ramdass
82% match
Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive visualization presents a hierarchical tree layout using D3.js v3, where each node is rendered as a colored rectangular box with text labels. The tree structure shows parent-child relationships with directional links that highlight the connection type between nodes. Built with `d3.layout.tree` and SVG rendering, the visualization features collapsible nodes, smooth animated transitions, and support for zooming and dragging via `d3.behavior.zoom`. The code demonstrates custom arrow definitions, drop shadows, and tooltips, with JSON data driving the node hierarchy and metadata such as node types, versions, and link directions.

Ccloud.data.sa@gmail.com
82% match