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.
AI-generated descriptionThis 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