D3 js Drag and Drop Zoomable Tree.

D3 js Drag and Drop Zoomable Tree.

D3 js Drag and Drop Zoomable Tree.

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

Below you can see an example of a D3.js Drag and Drop Zoomable Tree which is collapsible, panning and auto-sizing.

I recently had a need for this functionality for a project and was unable to find any previous examples of such on the internet.  Using the awesome D3.js library by Mike Bostock, I was able to get exactly what I needed with a bit of trial and error.  Here I open up my efforts for others to leverage.  It is certainly a visually pleasing and nifty tool.  You can theme it with CSS as you would anything else.

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.  However here I simply append any dropped node as a child to the node being dropped upon.

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 manageable and pleasing on the eye.

The source code can be found here: https://gist.github.com/robschmuecker/7880033

And an example of it working with code in the same view is here:- http://bl.ocks.org/robschmuecker/7880033

The main source code excluding jQuery as a helper for getting element sizes (used only once) and the D3.js library can be found below as javascript:

Below is the CSS used in the example above

I hope it can help others looking for a similar tool.
R.

Edit 14/10/2015

A kind lady by the name of Irina Papuc contacted me from Toptal.com she found this article and suggested that I perhaps be so kind to let all my kind good readers know about their blog.  So in a show of good faith – here my dears is the Toptal Blog with another nice D3.js article http://www.toptal.com/javascript/a-map-to-perfection-using-d3-js-to-make-beautiful-web-maps Happy D3’ing. R.

139 thoughts on “D3 js Drag and Drop Zoomable Tree.

  1. Flavio

    Hi Rob!
    I tried, and I almost there but…
    Regarding the horizontal distance between nodes. Your function:

    nodes.forEach(function(d) {
    d.y = (d.depth * (maxLabelLength*5));
    });

    is fine for all my tree but not for the last (deeper) names/items that are shown on the left side of the node/circle – the space taken is too big and don’t look well, So I tried the following:


    nodes.forEach(function(d) {
    d.y = d.children || d._children ? (d.depth * (maxLabelLength*5)) : d.depth*50;
    });

    But those last items are positioned on the wrong place… What am I missing?

    thanks in advance!
    😉

  2. Eyal

    Hey!
    awesome! great job!
    how can I set the tree to work horizontally? that it will start from top to bottom instead of left to right.

    thanks!

  3. Faizal

    Hi Rob,

    This is awesome! It’s exactly what I was looking to do, but didn’t have the technical expertise to execute. Your code works wonderfully! Was wondering if you can think of a way to highlight a path along the tree (or if that’s even possible in the d3 library). For instance, in your example, if I were to click the branch between “flare” and “scale”, then that branch, as well as every branch between “scale” and its children, would get highlighted. (and if the “scale” node’s children had children, then those branches would get highlighted, as so on…).

    thanks!

    Faizal

  4. Leonie

    Hi,
    I am having issues getting this to work locally. I have linked all the files correctly, it just seems to not be working. Has anyone else had this issue?

    Thanks,
    Leonie

  5. Jack Bennett

    Hi Rob,

    This is awesome and works exactly as I want to it, thank you!

    One thing I’m struggling to do however is highlight the path (and make it say, Red) back to the root node when a node with no children is clicked on. Is this something you’d be able to assist with?

    Thanks,
    Jack

Leave a Reply

Your email address will not be published. Required fields are marked *