D3 js Drag and Drop Zoomable Tree.

D3 js Drag and Drop Zoomable Tree.
D3.js, Misc.

D3 js Drag and Drop Zoomable Tree.

Rob Schmuecker
December 10, 2013
139 Comments

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

    such a great work @@

    i was looking for the same and i redirect here. but i have to implement collapsible feature inside bounded force layout graph. i’ve tried so much but couldn’t integrate collapsible feature inside force directed graph. please help me or guide me how to do that.. also i posted this issue on stackoverflow .. have a look on this
    http://stackoverflow.com/questions/20857298/how-to-merge-collapsible-feature-in-bounded-force-directed-graph

    Thanks 🙂

    Reply ↓

  2. Paul Knittel

    Hey Rob,

    Amazing example you posted there. Your demo with 50,000 nodes is particular impressive.
    Is there a way to get the flare.json file back with the modified data from the drag and drop?

    Looking forward to your response. Thanks mate.
    Paul

    Reply ↓

    1. Rob Schmuecker

      Hi Paul,

      I’m glad you found the example useful! Thanks for looking too! In terms of getting the flare_json back out once it’s been changed it would be a case of walking the “treeData” object and just sanitizing it to remove any of the coordinate values which get appended by D3.js and then downloading that (although not sure how easy that is without posting it back to the server to force a download). To see what I mean you can add a console.log(treeData) call as the first line of the update function and inspect the tree whenever you make any changes. It is a reflection of the tree as it currently stands. What I personally do on each “action” is send an ajax request to the server which then updates it’s copy and if there’s an error I revert back to how the tree was before the “action”. That way, with all being well the tree on in the browser and the tree on the server are the same and you can initiate a download from the server. Alternatively, if you didn’t want to save any of the data on the server but would rather the user be able to keep a “copy” of their changes you would post back the “sanitized” version of the treeData object to your server and serve it as a JSON file for the user to download. With such a method you could also allow users to “upload/load” a hierarchical structure which the server would then send to the browser and the user can edit at will before downloading a ‘modified’ copy.

      Reply ↓

      2. Jari

        I’m a newbie here but thanks for a truly fantastic demo especially the feature where you can modify the tree with drag’n’drop of nodes. I’m in a (non-profit) DNA-project where this could be very useful to visualize haplogroups in a tree, see example: http://www.viitasaari-dna.org/haplotree/isogg.html. The ultimate thing at this stage would be to get a modified tree back to the console as “sanitized ” JSON (as you describe above). I looked into and tried the other example referred to by Paul Knittel but it didn’t work for me with your original drag’n’drop tree. You don’t happen to have a working example of that?

        Reply ↓

        1. Rob Schmuecker

          Hello Jari,
          I don’t have an example of that . . . or at least I didn’t!

          You simply need to make a recursive function which strips out (or only keeps) certain properties of each node.
          e.g.

          function returnSanitized(node){
          var sanNode = {};
          sanNode.name = node.name;
          sanNode.children = [];
          if(node.children){
          node.children.forEach(function(child, index, array){
          sanNode.children.push(returnSanitized(child));
          });
          }
          return sanNode;
          }

          Then you can call this at any point passing in the root node. Then you could stringify it to JSON to get your JSON string if needed. e.g.:
          sanitizedNodes = returnSanitized(root);
          console.log(sanitizedNodes);
          console.log(JSON.stringify(sanitizedNodes));

          A demo can be found here: http://jsfiddle.net/robschmuecker/6xrhewq1/1/

          Reply ↓

        2. Jari

          I get the wanted output in the console by adding the call: console.log(JSON.stringify(root)) under Update; but it only works when the page is loaded. When I drag’n’drop the nodes I get the error: “Uncaught TypeError: Converting circular structure to JSON “. Any idea or simple solution?

          Reply ↓

          1. Rob Schmuecker

            Hi Jari,

            Not sure which browser you are using but it works fine for me on Chrome when dragging to rearrange the structure. As mentioned I did that fix/solution for you earlier on-the-fly so haven’t tested it across browsers. Possibly something simple to do with the way some browsers are less tolerant?! Have you googled the error message?
            R.

  3. Bhavin

    Hi Rob,

    Thanks a lot for this demo, We are trying to update the graph very often, on click of a button, we are creating a JSON and displaying its required graph. But the code breaks on IE9. What happens is, when we click a button, we can see the graph being created initially, but if we click the button again to create another tree, we do not see any change reflected and the page appears blank. Essentially If I clear the cache and reload the page, the updated diagram appears, while this is not the case with Firefox and Chrome. Is it the D3.js Incompatibility or something in general with regards to JSON Parsing and Caching with regards to IE9.

    Reply ↓

  4. Shay

    HI,

    Do you know how add label to the edges of this tree ?

    I searched in Google and found some results from Stackoverflow, without any success?

    Reply ↓

    1. Rob Schmuecker

      Hi,

      I’m not quite sure I understand what you mean. However to add labels outside of the tree you can get the calculations from within the code of the coordinates of the tree and it’s nodes and place text labels wherever you like. You can see what I mean in the following lines lifted from the node-specific label generation part of the code.

      nodeEnter.append("text")
      .attr("x", function (d) {
      return d.children || d._children ? -10 : 10;
      })
      .attr("dy", ".35em")
      .attr('class', 'nodeText')
      .attr("text-anchor", function (d) {
      return d.children || d._children ? "end" : "start";
      })

      However you would append the text to the SVG at the appropriate coords.

      Reply ↓

  5. Sum

    Hi Rob
    The example you posted here is awesome.
    I want to read data from xml file or otherwise use a local javascript object to read the data.
    Can you suggest some simple way to achieve this?

    Reply ↓

  6. Tom

    Hi Rob
    I really love this project.
    I would like to ask you for advice of how to best add new nodes to the tree.

    Ideally I’d like a plus button somewhere which creates a free-standing node, then be able to drag this new node to someplace on the tree.
    Then on the drag end “action” I will send an ajax request to the server which makes it’s own updates to the underlying data model as you suggested in the comment response above.
    I am open to a different implementation, the essential point being that I need to be able to add new nodes to the tree which are unknown at the time of loading.

    Here is a simplified version of your example:
    http://codepen.io/anon/pen/Eclkm/

    Also, it would be great if we could set all of the nodes to be collapsed by default.

    Thanks in advance.

    Reply ↓

    1. Rob Schmuecker

      Hi Tom,

      Apologies for the delay! What you are trying to do is all possible, without doing all the code myself and thinking aloud you’re going to want to :

      • 1. Add a node onto the canvas either on the click of a particular button or say on ‘right-click’. That node will be draggable.
      • 2. When you drop it on a target node, you’re going to need to do a check to see if the node is “new” or “established” and then handle accordingly.

      I use the ajax update on node drop already in several places successfully.
      As for giving you a bit of a hint with adding, check out this example. http://bl.ocks.org/mbostock/929623
      If you need more help just give a shout!
      Regarding starting all the nodes off collapsed you can simply add this code before the last two lines of the inital JS

      // Collapse all children of roots children before rendering.
      root.children.forEach(function(child){
      collapse(child);
      });

      // Layout the tree initially and center on the root node.
      update(root);
      centerNode(root);

      Hope all that makes sense. Good luck 😉

      R.

      Reply ↓

  7. ReddPool

    Hi,

    Awesome work ! Both of your exemples are amazing.

    I just had 2 questions :
    – Tell me if I’m wrong, but you had to code the hierarchy of your code, is there a way to obtain it from a database ? And is it possible to communicate with the database quickly enough to see the results when someone dropped a node ?
    – What are the node sizes ?

    Thanks. I’m really new to JS and even more to d3 but I’ll be really glad to understand it better.

    Reply ↓

    1. Rob Schmuecker

      Hey buddy,

      You can either add the node hierarchy manually from the client-side such as an upload. Alternatively you may want to start with a fixed number of nodes and allow the “client” to reposition them. But yes in previous projects I build the hierarchy directly from DB and echo it out as JSON for D3.js to use. How you end up doing that depends on your database structure. You may well need to loop/recurse through all levels to get all the children of parents etc, starting with a “root” level or you can use a “nested set” database model which may speed up the processing. I have used this successfully on trees with about 5K nodes but as it is on data which is not nested set, the recursion does take several seconds to build the JSON hierarchy before the page loads.

      To answer the second part of your first question, my experience on this is based on an “Admin user” being logged in and being the only person manipulating the backend data. If you have a multi-user environment what I am about to say below will not apply as you will need to have a polling/push setup to keep both the “client” and “backend” in sync.

      I successfully update the underlying database structure via ajax calls in a very speedy manner. Time, however isn’t such a big factor since as we’re letting the ajax calls happen in the background, the user can carry on. As long as the ajax call(s) returns successfully, the “client-side” representation is already in sync (as it was actually “ahead”) with the DB, however if there has been an error for whatever reason I notify the user and the safest thing is to reload the page/JSON data to get a true reflection of the state of the DB hierarchy again.

      Hope that helps, any issue, give us a shout.
      😉
      R.

      Reply ↓

    1. Rob Schmuecker

      Hi Henna,

      You are already filling the circle green with these lines of your code:

      // Add circle
      node.append("circle")
      .attr('r', 5)
      .attr("fill", 'green');

      So you can specify which colour you like to “Fill” in either hexadecimal or string format. Alternatively since you are giving your nodes a class of “node” you can specify this via CSS like below:

      .node circle {
      fill: red;
      }

      This is demonstrated in the link here http://jsbin.com/adUnIwuH/23/edit

      Hope that helps,

      😉

      Reply ↓

  9. suraj

    Hi Rob,
    What I want to achieve is to draw a collapsable tree with data from mysql database .I have seen example
    where json file is use to get data , Please help me how to draw collapsable tree & we take data from database table

    Reply ↓

    1. Rob Schmuecker

      Hi Suraj,
      This depends on your backend which is interfacing with your database. You can make your JSON structure at the backend and then render the JSON in the page before instantiating the tree which references the JSON.
      R.

      Reply ↓

  10. suraj

    Thks for your reply Rob , but I’m not able to get it working .As you have mention in Reply to ReddPool on 17 april 2014 that in your previous projects you build the hierarchy directly from DB and echo it out as JSON for D3.js to use.I am trying to achieve the same from last 2 days but not able to do it.
    Can to plz help me with how to build the hierarchy directly from DB for collapsible tree and echo it out as JSON for D3.js and how to use it in D3.js .I have not done this before that why asking you all this things in details .Hope you understand.

    Thanks in advance .

    Reply ↓

    1. Rob Schmuecker

      Hi Suraj, You will have to give more information as to the structure of your database, the type of database, the backend language you are using etc. As otherwise I cannot help.

      Thanks,
      R.

      Reply ↓

  11. Suraj

    Hi Rob,
    I am using PHP and mysql .Database structure anything which is suitable for d3.js colapsible tree.Example Database Table. id(auto increment), name, parent . (or even u can change structure if u want to )
    I have to create var treeData array as in Fiddle ( http://jsfiddle.net/draut/nCttr/3/ ).
    I have to create this structure(dynamically) in php by calling values of Database.
    You can also provide help on stackoverflow
    http://stackoverflow.com/questions/23514763/convert-flat-json-to-tree-view-like-json/23515077? noredirect=1#comment36069211_23515077

    Any help is appreciable .Thanks…

    Reply ↓

    1. Rob Schmuecker

      Hi Suraj,

      I’ve previously also had to do this for a flat data-structure. I used a recursive PHP function. Here is what I had to do in PHP: (note code not tested)

      // MySQL connection defined elsewhere as $con and assuming your table is called Categories
      function getCategories($name = null) {
      if(is_null($name)){
      //get all top-level parents
      $sqlString = "SELECT * FROM Categories WHERE parent IS NULL";
      } else {
      $sqlString = "SELECT * FROM Categories WHERE parent = '$name'";
      }

      // Initialise empty categories array;
      $allCats = array();

      $result = mysqli_query($con, $sqlString);

      while ($row = mysqli_fetch_array($result)) {

      $cat['name'] = $row['name'];
      $cat['parent'] = $row['parent'];

      // Fetch any children it may have
      $childCats = getCategories($row['name']);
      if (count($childCats) > 0) {
      $childCat['children'] = $childCats;
      }

      $cat['children'][] = $childCat;
      $allCats['children'][] = $cat;
      }

      return $allCats;
      }

      $allCats['name'] = "All Categories";
      $allCats['parent'] = null;
      $allCats['children'] = getCategories();

      echo json_encode($allCats);

      Reply ↓

  13. Arun K

    Really cool what you have done here!!! 🙂

    I am trying implement it locally without a server where the data is hard coded in the code itself. I am not able to achieve it, I am guessing, due to the usage of node.js . Is there a way to achieve the rendering of the tree without a server? Can the node.js references be substituted with equivalent ones?
    Thanking you in advance.

    Arun

    Reply ↓

    1. Rob Schmuecker

      Hi Arun,

      That’s no problem whatsoever. Just make sure to do all your processing on document ready. Here below I leverage the jQuery ready function on the document.

      $(document).ready(function(){

      yourJSON = {
      "name": "flare",
      "children": [{
      "name": "analytics",
      "children": [{
      "name": "cluster",
      "children": [{
      "name": "AgglomerativeCluster",
      "size": 3938
      }, {
      "name": "CommunityStructure",
      "size": 3812
      }, {
      "name": "HierarchicalCluster",
      "size": 6714
      }, {
      "name": "MergeEdge",
      "size": 743
      }]
      }, {
      "name": "graph",
      "children": [{
      "name": "BetweennessCentrality",
      "size": 3534
      }, {
      "name": "LinkDistance",
      "size": 5731
      }, {
      "name": "MaxFlowMinCut",
      "size": 7840
      }, {
      "name": "ShortestPaths",
      "size": 5914
      }, {
      "name": "SpanningTree",
      "size": 3416
      }]
      }]
      }]
      };

      // Now instead of
      // treeJSON = d3.json("flare.json", function(error, treeData) {...
      // You can do this

      treeData = yourJSON; // and the rest will work as normal.

      ...
      )}; // this is the ending brackets of the jQuery ready function but you can use the ones from the d3.json method.

      Reply ↓

      2. moses

        I tried it but I still get a blank page.. Here is my code:

        $(document).ready(function(){

        json = { here is my complete json.flare content

        };

        treeData = json;

        “your complete javascript code” without treeJSON = d3.json(“flare.json”, function(error, treeData) {…

        I got no error on the console.

        Here is my index.jade file:

        extends ../layouts/home
        head
        meta(http-equiv=’encoding’, content=’text/html’, charset=’UTF-8′)
        block content
        script(type=’text/javascript’ src=’js/d3.min.js’)
        script(type=’text/javascript’ src=’http://code.jquery.com/jquery-1.10.2.min.js’)
        script(type=’text/javascript’ src=’js/dndTree.js’)
        link(rel=’stylesheet’, href=’stylesheets/tree.css’)

        Reply ↓

  14. Perok

    could you please give us a hint on how one could show in abeautiful and clear way the size of each node in the diagram? Seems all this info now is not shown, right? For example we could increase the circle’s node size? or use a color climax? (cold colors small values. warm colors higher values?)

    thank you

    Reply ↓

    1. Rob Schmuecker

      Hi Perok,

      Many thanks for stopping by. Adding the additional information is all very possible in a myriad of ways. The easiest (from a coding perspective) would be to add the additional node data to the “text” element added to each node. However you can certainly get more creative with the display of the data. Have a look at these two examples: http://www.brightpointinc.com/interactive/budget/index.html?source=d3js and http://bl.ocks.org/csarsurvey/8999077 (which is a direct fork of the code illustrated here).

      Reply ↓

  15. Roberto Aragón

    Hi, Rob:

    First of all, I would like to thank you for your example.
    Next, a question: what is your code licence?

    Regards,
    Roberto.

    Reply ↓

    1. Rob Schmuecker

      Hi Roberto,

      Whilst I haven’t specifically stated any particular license. All code here is to be considered the same as the D3.js library itself, BSD. Basically, you can do what you want with my code, but I would appreciate attribution 😉
      Many thanks,

      R.

      Reply ↓

  16. Gehiks

    Hi Rob,

    This work is really awesome. As I’m trying to implement it I’d like to know how to disable the zoom on mouse wheel. How can I do it?

    Regards,

    Gehiks

    Reply ↓

    1. Rob Schmuecker

      Hi Gehiks, Essentially you would be disabling the zooming feature apart from double-click to zoom in and shit+double-click to zoom out. Is this what you want? If so you can look at adding if(d3.event.sourceEvent.type == 'wheel'){
      d3.event.sourceEvent.stopPropagation();
      d3.event.sourceEvent.preventDefault();
      return;
      }       like this // Define the zoom function for the zoomable tree
      function zoom() {
      if(d3.event.sourceEvent.type == 'wheel'){
      d3.event.sourceEvent.stopPropagation();
      d3.event.sourceEvent.preventDefault();
      return;
      }
      svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
      }       to the zoom function however it seems to have a memory of sorts and when you click it will zoom to where the mouse “had” scrolled.
      I will look into this further and report back.
      Thanks,
      R.

      Reply ↓

  17. Guillaume

    Hi Rob,

    Your work is really good !
    It is perfect to represent the organization of the society in which I work.
    I just have a little question: is it possible to obtain a vertical tree ?
    It would be really great!
    Thank you in advance.

    Regards,

    Guillaume.

    Reply ↓

    1. Rob Schmuecker

      Bonjour Guillame!
      Yes it is possible to create a vertical tree of course. In it’s easiest fashion, you can just reverse the x and y in ‘var = diagonal…’ so instead of:-
      var diagonal = d3.svg.diagonal()
      .projection(function(d) {
      return [d.y, d.x];
      });

      You would change it to:-
      var diagonal = d3.svg.diagonal()
      .projection(function(d) {
      return [d.x, d.y];
      });

      This same needs to be done in the ‘nodeEnter, nodeUpdate, nodeExit, rag, updateTempConnector’ functions for example instead of:-
      var nodeEnter = node.enter().append("g")
      .call(dragListener)
      .attr("class", "node")
      .attr("transform", function(d) {
      return "translate(" + source.y0 + "," + source.x0 + ")"; // <-- You will change this <-- }) .on('click', click);

      You would put

      var nodeEnter = node.enter().append("g")
      .call(dragListener)
      .attr("class", "node")
      .attr("transform", function(d) {
      return "translate(" + source.x0 + "," + source.y0 + ")"; // <-- To this <-- }) .on('click', click);

      This will be sufficient but then you will need to play with the other variables in the script to change the spacing for the nodes which is currently found here var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line which you can change to perhaps be a function of maxLabelLength.

      I will see if I can find the time to post an example of a vertical tree.
      Bonne journée

      Reply ↓

    1. Rob Schmuecker

      Hi Swapnil,

      The size has effect in this example, I just used the flare.json which comes as part of download for D3.js as an example. The code exhibited here can consume any JSON that has the structure with ‘name’ and ‘children’.

      Thanks,

      R.

      Reply ↓

      2. Raja

        Hi,

        I want to do something similar to the tree diagram above. However my problem is that I have a child node which takes relationship from two parental nodes.

        For example: A-> B, C-> D and B&D -> E (Both B and D have a common child D) How can I fix this.

        Thank you very much for helping me out.

        Br,
        Raja

        Reply ↓

        1. Rob Schmuecker

          Hi Raja,

          Apologies, this is not something that I have had the need to do and I don’t think will work with this code without some significant modification as what would a node do when it is dragged/dropped? Also the JSON structure does not naturally allow for a multiple parent scenario out-of-the-box. Perhaps we can splice out the drag/drop functionality totally and just keep the zoomable/pannable functionality. I would suggest that you make a standard tree and then load a separate JSON which defines the additional multiple parents for a particular node. Then iterate through this and add new “links”.
          Hope that helps,

          R.

          Reply ↓

          2. Raja

            Hi

            Can you point any sources, how to have multiple json files for one visualization in d3?

            Thank you,

            Br,
            Raja

          4. suresh

            Hi Rob,
            Thanx for the quick reply.. can you give a working example for the same
            As per the previous comments i understood that
            First i should draw the tree without cross connections
            then i should have seperate json file which will have cross connections
            am i correct in understanding it … if so how should be my second json file look like… i saw your couplings example in github but can i have a working example for the same
            if my understanding is wrong can you explain in detail. Thank you very much

  19. Tapan Bohra

    Hi rob,
    I saw this on D3s main website in example section and found this very useful but I have an issue.
    Every time the tree is loaded , it shows the entire tree which if is huge covers the entire page and it becomes difficult to than close each node one by one, I want to manually open nodes and edges which I want.
    Can you suggest what changes I have to make in the code??

    Reply ↓

    1. Rob Schmuecker

      Hi Tapan,

      Please have a look at another example I made which incorporates 50,000 nodes.
      The gist is here https://gist.github.com/robschmuecker/7926762 with a working demo to be found here http://bl.ocks.org/robschmuecker/7926762.
      Here all nodes are collapsed apart from the immediate children of the root node and I believe the only modification I made to the code was calling the below method before displaying the tree by calling the initial update(root) function at the bottom of the javascript.

      // Collapse all children of roots children before rendering.
      root.children.forEach(function(child){
      collapse(child);
      });

      Hope that helps,

      Thanks,

      R.

      Reply ↓

  20. Jessie

    Hi, thanks for this great example!
    I’m using your code as a reference for something I’m building. I was wondering though — when you drag, you remove the children nodes and links. However if that node wasn’t originally collapsed, it would expand again when it’s connected to another node. Where in your code does that happen? My code so far would remove the children nodes and links but then after I drop the node, it stays collapsed.

    Also, would it possible to drag a node somewhere and then having the node stay at the dropped spot and the links extended to the node?

    Thanks again.

    Reply ↓

    1. Rob Schmuecker

      Hi Jessie,
      If I get you correct, you want any node to become and stay collapsed when you drop on another node, even if it wasn’t collapsed when you started dragging it?
      Then you would modify the endDrag function accordingly:

      function endDrag() {
      selectedNode = null;
      d3.selectAll('.ghostCircle').attr('class', 'ghostCircle');
      d3.select(domNode).attr('class', 'node');
      // now restore the mouseover event or we won't be able to drag a 2nd time
      d3.select(domNode).select('.ghostCircle').attr('pointer-events', '');
      updateTempConnector();
      if (draggingNode !== null) {
      collapse(draggingNode); //<--- collapse the node in question at all times when dropped. update(root); centerNode(draggingNode); draggingNode = null; } }

      As for your next question, it is possible to drag and then leave the node where you dropped it. This would be a bit more customisation than I can warrant doing right now. Please feel free to get in touch via my Contact page and we could discuss what your exact requirements are and whether I can help you on a consultancy basis.

      Thanks,

      R.

      Reply ↓

  21. Tom Bortels

    Rob – this is stunningly good. I just wanted to say I appreciate you posting the demo and code and explanation tremendously – I learn best from good working examples, and that is this. The people like yourself who take the time and effort to share are my personal heroes. Just wanted to say thank you – so, Thank you!

    Reply ↓

  22. Virginia

    Hi Rob,

    Like everybody else, I’m super thankful that you posted this online. I couldn’t have found something more fitting for what I want to do than this.

    I was wondering if it would be possible to replace the diagonal with a polyline, or a line with multiple points. Basically, I am going for less of a curvy link between nodes, and more of an angled off, straight-edged kind of link. Does that make sense? If you have an idea of how you’d approach this, I’d love to hear it, thanks so much again!

    Reply ↓

    1. Rob Schmuecker

      Hi Virginia,

      You need to substitute the call to diagonal with another function. In this example http://bl.ocks.org/mbostock/2966094 the function called is “elbow”.
      You could use the below code and substitute that for each call to diagonal. This is always when adding the ‘d’ attribute e.g. .attr("d", straightLines);

      function straightLines(d, i){
      return "M" + d.source.y + "," + d.source.x
      + "L" + d.target.y + "," + d.target.x;
      }

      Have a look at an incomplete demo here http://jsfiddle.net/robschmuecker/3HL4a/287/
      Hope that helps,

      Thanks,
      R.

      Reply ↓

  23. Mélanie

    Hi Rob,

    Thanks for this example, the code, the tuto. That’s great especially for a beginner! I like the tree representation and I used it for our current project. The idea is to map legal and institutional frameworks and it works well. This is my first D3 visualization and I like it. I have two questions though: how can I change the size of the link between nodes? And the second one is: would it be possible to add a search function?
    Thanks.
    Mélanie

    Reply ↓

    1. Rob Schmuecker

      Hi Mélanie,

      To change the link size you can either make them vertically wider by changing the value here:
      var newHeight = d3.max(levelWidth) * 50; // 50 pixels per line
      and you can make them horizontally wider/longer by changing the values below:
      // Set widths between levels based on maxLabelLength.
      nodes.forEach(function (d) {
      d.y = (d.depth * (maxLabelLength * 40)); //maxLabelLength * 40px
      // alternatively to keep a fixed scale one can set a fixed depth per level
      // Normalize for fixed-depth by commenting out below line
      // d.y = (d.depth * 500); //500px per level.
      });

      Both of these changes have been implemented as an example here http://jsfiddle.net/5nHGz/2/
      As for the search function I have indeed done this for a client previously and could certainly help you with such. Feel free to get in touch if you want to discuss the options.

      Thanks,
      R.

      Reply ↓

  24. Vlad

    Very nice work!

    Is it possible to load the json at on click event based on node ? (aka lazy loading?)
    in other words, intercept the click event, display some data, update the child nodes (server side json with only 1 level children) and then collapse the branch ?
    Vlad

    Reply ↓

    1. Rob Schmuecker

      Hi Vlad, yes I’m sure this is possible too. Whilst I haven’t actually done this before I see no issues in doing so if you can handle the loading time in a smart manner so that the user can understand that they are waiting for results.
      Let us know if you get it working as I’m sure the community would appreciate it.

      Thanks,
      R.

      Reply ↓

  25. mutongwu

    Hi Rob,
    What I want to achieve is to diff the ghostCircle where mouseover event happened. for example,make the ghostCircle have a green color which indicates that it might be a proper “drop” action.

    Is it possible ? thanks.

    Reply ↓

    1. Rob Schmuecker

      Hi, I’m not sure I completely understand. Do you want to change the colour of all ghostCircle‘s (you can do this in the CSS) or just the one being hovered on which the tempConnector line is connected to?

      Reply ↓

      1. mutongwu

        just the one being hovered on which the tempConnector line is connected to. ———–yes ,this’s what i want.
        —————————–
        and i have another question: is there a good way to avoid overlapping of nodes ? when i change the size of each circle (no more the default 4.5 , but between 5 to 15 randomly), nodes overlapped. So i change the code in function “update” as following :
        var newHeight = d3.max(levelWidth) * 35 ; // default 25 pixels per line

        is there a better advise ? 🙂

        Reply ↓

        1. Rob Schmuecker

          OK – to change the colour of the one being hovered upon, we’d edit the node creation a little. Note that the below code can be improved by changing the z-index properties of the “hovered” node but I’ll leave that as a little exercise for you 🙂

          /////
          // phantom node to give us mouseover in a radius around it
          nodeEnter.append("circle")
          .attr('class', 'ghostCircle')
          .attr("r", 30)
          .attr("opacity", 0.2) // change this to zero to hide the target area
          .style("fill", "red")
          .attr('pointer-events', 'mouseover')
          .on("mouseover", function (node) {
          overCircle(node, this);; // <-- added 'this' as a reference }) .on("mouseout", function (node) { outCircle(node, this); // <-- added 'this' as a reference }); /// // Then amend the functions below to do as you please with the "ghostCircle" var overCircle = function (d, that) { selectedNode = d; d3.select(that).style("fill", "green"); updateTempConnector(); }; var outCircle = function (d, that) { d3.select(that).style("fill", "red"); selectedNode = null; updateTempConnector(); };

          As for increasing the lineHeight, yes that is your best bet. For example here http://jsfiddle.net/robschmuecker/3Uw2L/1/

          Reply ↓

  27. pradeep kumar

    You are amazing..! You stop by everyone’s question and answered everyone..! Hats off bro.! I appreciate it..! Thanks for the help you did to all..! 🙂

    Reply ↓

  28. quique

    Hi Rob,

    First of all, congrats for the superb work and support.

    I was wondering about mobile browsers behaviour of the drag&drop functionality. I have tested it on chrome browser in both samsung tablet, mobiles and other android devices and it seems to be a very elusive thing to do for the user and sometimes it simply does not work.

    Is this something to do with D3js and mobile browsers (I am new to D3js) or is there any workaround / fix to achieve drag&drop in mobile devices?

    Thanks in advance,
    quique

    Reply ↓

    1. Rob Schmuecker

      Hi Queque,

      There are a couple of reasons for this one is the events of mousover and mouseout aren’t implemented with touch in the way that one might assume. http://www.html5rocks.com/en/mobile/touchandmouse/ The demo I have posted is not touch friendly and I will look into making a touch-friendly one some time. Also you must check that your viewport doesn’t zoom http://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari http://stackoverflow.com/questions/11345896/full-webpage-and-disabled-zoom-viewport-meta-tag-for-all-mobile-browsers
      Hope that clears a few things up.

      R.

      Reply ↓

  29. beckham

    Dear Rob Schmuecker!
    Thanks for your posts. I have a question: in case of thousand of nodes, query and build json data are not good for perfomance. How to lazy load the children when the parent node clicked?

    Reply ↓

    1. Rob Schmuecker

      This would need a form of loading indicator to notify the user that some action is taking place (such as an AJAX call to fetch the additional nodes) and then when you have got the data you need to add them into the “tree” and re-parse everything to make sure that the “links” get associated by re-calling the “links” method e.g. “links = tree.links(nodes);” etc and the rest should be pretty much the same. Hope that helps, it’s quite a brief overview but the principle’s are there!

      Thanks,
      R.

      Reply ↓

  30. beckham

    Hi Rob!
    I’m modifying your code, i need to custom the tree, tree with text, image inside the rectangular nodes and direction is top-bottom.
    I have tried to modify some codes, but running not fine. Could you help me out?
    Thanks a lot!

    Reply ↓

  31. Max

    Hi,
    A very good piece of work.Is there anyway through which I can get a list of all nodes in your tree? tree.nodes(root) function returns only those nodes which are not the descendants of a collapsed node, however what I require is a list of all nodes irrespective of whether any of there ancestor is collapsed or not…

    Reply ↓

    1. Rob Schmuecker

      Well you have treeData which is the variable exposed by the initial loading of flare.json in the call treeJSON = d3.json("flare.json", function(error, treeData) {... which is an object containing all your initial nodes. That should be what you are after. Thanks. R.

      Reply ↓

  32. myra

    Hi Rob,

    I want to change the color and the width of the link dynamic based on the no of visits to the path and the useful status. For example if my paths a->b->c->d has 3000 visits and useful 1, whereas a->b->e-f has 200 visits and useful 0, where should i make the change in the code to reflect the effect whenever a node is selected

    Reply ↓

  34. mojtaba

    Hi

    thanks for your post, I’d like to say that I am going to save the changes when I drag and drop some tree items and I’d like to edit the layout by using drag and drop option and then save new layout, can you please tell me how I can do that ?

    thanks.

    Reply ↓

      1. mojtaba

        Thank you so much for the response.

        I have another question. I’d like all the nodes to be closed when I click on the root node.

        for example I have a root node with 10 children and each child has 5 children. assume that all children are open and when I click on the root and then reopen it, I want all 5 children of to be closed and only the first level 10 children be shown. How can I do that ?

        thanks in advance.

        Reply ↓

        1. Rob Schmuecker

          Hi Mojtaba,

          Have a look at the “expand” and “collapse” functions and how you would copy and amend them to suit your needs e.g. compare the node to root and only then collapse the children of the children e.g. making a function called collapseRootChildren. This can then be called by “collapse” when you collapse the root node only.
          Hope that helps,

          R.

          Reply ↓

  35. Rashed Hoque

    Hello Rob,

    Awesome, fantastic … great stuff. Thanks for sharing. You answered so many comments… great attitude. Not sure if you are still following/answering the comments, if so would mind to have a look into few things I would like to tweak. (Sorry I am pretty much beginner in d3)

    1. To put hyper-links ( <a href..) on each node text, which part of your code needs to be updated?
    2. For long text (to set as text or hyper-link text) how to wrap or make fit in multiple lines?

    Finally, not really d3 stuff, more of creating the hierarchical data structure. I am using a function that returns the following when I pass id 1234:

    { id: "1234", value : 34, children : [ { id: "3456", value: 56} , { id: "9870", value: 43} ] }

    now I need some kind of recursion so that when I pass the "id" of "children" it returns "children" and then the json gets updated. As an example if I pass id "3456":

    First it returns : { id: "3456", value: 56, children : [ { id : "8899", value : 45} ] }
    And then the root document gets updated like:

    { id: "1234", value : 34, children : [ { id: "3456", value: 56, children : [ { id : "8899", value : 45} ] } , { id: "9870", value: 43} ] } ..note how the root json gets updated with children of "3456". So this is basically recursively getting "children" and updating the original json document, am trying to solve it in ruby.

    Any help would be greatly appreciated! By the way, just curious to know, have you any interest in freelancing work?

    Thanks,
    Rashed

    Reply ↓

    1. Rob Schmuecker

      Hi Rashed,

      Thanks for commenting. In regards to your recursion function, it’s a little bit ambiguous as to where you want this done. I’m assuming you want to do this serverside and hence mention using Ruby. I unfortunately am not too familiar with Ruby but I would just write a normal recursive function similar to this:-

      function getChildren(parent){
      children = null;
      retChildren = new Array(); // the array returned containing children if any.
      // do something like query your database to get children here
      children = //something returning either children or 0/null here e.g.       SELECT * FROM nodes WHERE parent_id = parent['id'] or similar
      foreach(children as child){
      tempChild = new Array();
      tempChild['value'] = child['value'];
      tempChild['id'] = child['id'];
      tempChild['children'] = getChildren(child); // here is where we recurse down into the children's children and so-on.
      retChildren[] = tempChild;
      }
      return retChildren;
      }
      Then you would call that passing your root node as the parent.
      Yes I am always interested in Freelance work!
      Hope it helps,

      Thanks,
      R.

      Reply ↓

      1. Rashed Hoque

        Hello Rob,

        Thanks a lot for your reply. Yeah it’s something to be done in server side. I really appreciate your idea, will try and get back to you.

        Am trying to tweak your d3 code to :

        1. Include hyper-links on node text
        2. Wrap long text fit in either multiple lines

        Any guide line how to achieve the above mentioned features? Do I need to use something called “foreign object”? Grateful if you could comment.

        Good to know your interest. Will get back to you soon!

        Cheers,
        -Rashed

        Reply ↓

        1. Rob Schmuecker

          Hi Rashed,

          Foreign object does work however is not supported by most if not all versions of Internet Explorer 🙁
          As for hyperlinks you can just “emulate” them by styling them correctly with font-color, text-decoration:underline; and pointer styling to make them look like links and then handle the opening of the link on the ‘click’ listener such as this which needs a “link” property in the JSON object for the given node…
          function click(d) {
          if (d3.event.defaultPrevented) return; // click suppressed
          if(!d.children && !d._children){
          window.open(d.link,'_blank');
          return;
          }
          d = toggleChildren(d);
          update(d);
          centerNode(d);
          }

          Reply ↓

  36. Davor Gobac

    Hi Rob,
    Amazing work. Thank you very much.

    I havent started to change your code to my needs just yet, beacuse of business rules I need to imnplement.

    I need a tree that spreads left and right of the root node. Something like your example with a mirror in the middle :). Can it be done? If it can than this is a solution that I can start to implement.
    I have seen the radial solution: http://jsfiddle.net/Nivaldo/CbGh2/, but it is not good for me because the nodes run wild when expanded. I want them to behave like they do in your example. I have a hunch that if I want to implement this i’ll need to change the D3.js file?

    Once again, thank you for all the hard work you have done.

    Reply ↓

    1. Davor Gobac

      Hi,

      Found the solution on : http://bl.ocks.org/jdarling/2073ba4c2d640236e2e2.
      Now all I need to do is apply it on your tree view becuase of look and feel.
      I made some changes to the layout of the nodes, because I want particular nodes left and right.
      I added level attribute to JSON top nodes and depending on that showing them left or right instead of a mod keyword.
      for (; i < l; i++) {
      if (json.children[i]["level"] == "0") {
      json.left.push(json.children[i]);
      json.children[i].position = 'left';
      } else {
      json.right.push(json.children[i]);
      json.children[i].position = 'right';
      }
      }

      D.G.

      Reply ↓

  37. Jari

    Hi again! I use “centerNode((root),zoomListener.scale(0.25));” to set the zoom level depending of the extent of branches in different haplotrees we have, refer to: http://www.viitasaari-dna.org/haplotree/

    But how to zoom into an arbitrary node? I tried to to use the id or the name instead of the ‘root’ above but I can’t get it to work!

    I haven’t seen you around in Halmstad yet!! The food and drinks are still here! 😉

    Bes regards
    Jari

    Reply ↓

    1. Rob Schmuecker

      Hi Vams,

      This is not a straight-forward problem I think. You will need to debug this by checking the coordinates sent to the zoom event (also in relation to the root node coords) and then modifying accordingly. I am guessing that due to the way that the radial tree works the coordinates are offset somewhat than in a linear tree.
      Thanks,
      R.

      Reply ↓

  39. Amit

    Hi Rob,

    That’s an awesome visualization of d3 you have made. I want to take this one step ahead i.e. I want to display a tool-tip containing the data of the nodes on mouseover.

    Please help me with that?

    Thanks in advance.

    Reply ↓

    1. Rob Schmuecker

      Hello Amit,

      I would suggest that you listen to “mouse-over” and then show a tooltip accordingly at the x,y coordinates by either implementing something like the jQueryUI library or Bootstrap. The requirement is quite broad and as such I cannot give more comment unfortunately!
      Thanks,
      R.

      Reply ↓

      2. Flavia

        Hello Rob,
        thank you for sharing your implementation of tree view. It already helped me a lot.
        Also thank you Jari for opening and sharing your example of tooltip. I also need to have the tooltip implemented in the tree view.
        I copied the functions mouseover(d) and mouseout(d) from your example to Rob tree view code. But it is still not showing the tooltip when mouseover the node. Do you have any tips where should I add them and if there is anything else I should do?

        Thanks for any help.
        Flavia

        Reply ↓

  40. rasha

    hi…
    i would like to thank u very mush
    but i have two question
    1-how to change circle size??
    2-how change the point(x,y)to root node??
    thank u very very very very much…..

    Reply ↓

    1. Rob Schmuecker

      Hello Rasha,

      To answer point 1. You would amend the “r” attribute of the circle

      e.g.

      nodeEnter.append("circle")
      .attr('class', 'ghostCircle')
      .attr("r", 30)

      I unfortunately don’t understand what you mean by point 2. 🙁

      Thanks,

      R.

      Reply ↓

      1. rasha

        hi how are u
        i would like to ask question
        can we do son nodes appear in circle ship around father node like sun brights with all the features of this model or it is impossible???
        please help me ….. i am waiting u

        Reply ↓

  41. John

    Hi, I sent you an email about a question I have. Also,following is my second question:

    in “flare.json” what does:
    “”size”: 3938″ means or does.

    I changed its value but nothing seems to happen visually.

    Thanks

    Reply ↓

  43. Garima

    Hi,

    I have a structure where a node is child to more than one parent. Example: A->B; A->C->B. But this is not working in this case. Can it be handled?

    Reply ↓

  44. Randy

    Hey there Rob! I’ve been working on an implementation of this treeview using json that is sent by a server and then consumed by us. It’s pretty much up and running at this point but I’m still having trouble when I click to hide a node’s child nodes. All of my nodes and links get bundled up in that one node I have clicked. Any idea what might be happening in this case? Really great stuff by the way and thank you beforehand with any help you can provide me with!

    Reply ↓

  46. Laurent

    This is tremendous work Rob I have to admit! There’s one lingering question I have after going through your code and the different comments on this thread: do you think there would be a way to reverse the tree to JSON after you’ve modified it? For my purposes, I see value in being able to output the newly-modified tree to JSON and comparing it to the original input. Do you have any insight on that?

    Reply ↓

  47. Mike

    Hi Rob!
    The nodes order in my json data is A-B-C-D-E, but when show on the tree, the order did not like that, it becomes E-C-D-A-B, how can i fix it? Thank you!

    Reply ↓

    1. Rob Schmuecker

      Hi Mike,

      In the example, if you were to look through the code you’ll find a function called “sortTree” which gets called on the tree. You can amend or omit that to your desire.

      Thanks,

      R.

      Reply ↓

  50. Flavio Jarabeck

    Astounding code and example! Congratulations!

    One question: How can I structure the JSON code to differentiate between nodes that are categories and nodes that point to a webpage (the end of the tree would be links to web pages), so I can style them properly… I’m trying with no success…

    thanks in advance!

    🙂

    Reply ↓

    1. Rob Schmuecker

      Hi Flavio,

      This should be simple to check if the node has “children” and if it doesn’t it is in hour case a weblink and the user must navigate to the intended link. SO you wouldn’t need to change the JSON per se apart from add a weblink for the end nodes and then listen to the “click” on the nodes/labels and differentiate between the two types of click. Email me if you want more assistance.

      Reply ↓

      1. Flavio Jarabeck

        Hi Rob, Thanks for the information… reading other posts in this page I found a way to do that… done!

        Thanks again!

        Reply ↓

Leave a Reply

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