D3 dndTree + Zoom + Pan + Misc Features

100%

D3 dndTree + Zoom + Pan + Misc Features

✓ Published0🌍 Public

Last edited Mar 10, 2017

Created on Mar 10, 2017

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.

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

forked from <a href='http://bl.ocks.org/git-ashish/'>git-ashish</a>'s block: <a href='http://bl.ocks.org/git-ashish/99789bed329a96fa244c'>D3 dndTree + Zoom + Pan + Misc Features</a>

mit Licensed

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

90% 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

89% match

Loading thumbnail…

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

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`.

PPacsangon

88% 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

82% match

Loading thumbnail…

Tree

An interactive tree visualization displays a hierarchical dataset from flare.json, with collapsible nodes, color-coded status indicators, and breadcrumb navigation. The right panel shows user and token details for selected nodes. Implemented with React and D3 v3, it uses `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` for pan/zoom, with SVG rendering and animated transitions. Node colors reflect time-based status, and blinking effects highlight urgent items, while the interface supports expanding or collapsing all branches.

Ssrinivasjavvadi

81% match

Loading thumbnail…

Untitled

An interactive drag-and-drop tree diagram visualizes the hierarchical structure of the Flare JSON dataset. The visualization uses D3.js v3 to render nodes and links as SVG elements, and incorporates an animation system with a zoom listener and pan controls. The tree layout is computed using `d3.layout.tree` and `d3.svg.diagonal` projections, while node dragging and sorting are handled through custom JavaScript functions. The interface allows users to explore the dataset by repositioning nodes within the tree.

Ssrinivasjavvadi

81% match

Loading thumbnail…

Fork of Collapsible Tree Version 1

This interactive collapsible tree visualization displays hierarchical data from the flare-2.json dataset. Users can click on nodes with children to expand or collapse branches, with smooth animations transitioning nodes and links to their new positions. The visualization uses D3.js v6, specifically leveraging `d3.hierarchy`, `d3.tree`, `d3.linkHorizontal`, and the `transition` API to animate the layout changes. Animated zooming and panning through `d3.zoom` enhances navigation of the complex hierarchical structure.

PPiotr Paszek

79% match

Loading thumbnail…

Collapsible Tree

This interactive visualization displays a collapsible hierarchical tree of the Flare software package’s class structure. Users click nodes to expand or collapse branches, with smooth transitions animating the tree’s layout changes. The visualization uses d3.hierarchy and d3.tree to compute node positions, d3.linkHorizontal for curved links, and d3.zoom for panning and scaling. Data comes from flare-2.json, rendered as SVG elements with circles and labels, updating via enter, update, and exit selections with d3.transition.

FFereidoun Mianji

79% match