0

I'm using this example as a base D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.

What I need is a tree where all the leaf nodes are the same distance from the root. It should look something like the Cluster Dendrogram.

I would use the Cluster Dendrogram but it lacks the zooming, panning and collapsibilty options (I've cut out node dragging). Also the difference between the two examples is that one uses tree layout whereas the other cluster layout.

All your help and suggestions would be much appreciated.

Michael
  • 11
  • 1
  • 6

1 Answers1

0

It likely won't be easy to implement because the tree layout likes it's depth but you could do something like this. 

nodes.forEach(function(d) {if(!d.children){
    d.depth = 3; //3 should be replaced with whatever your lowest depth is
                 //you could write a function to find it too. let me know if you need that
}})

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

this will accomplish part of what you are talking about but there is nothing to prevent the nodes from overlapping here. This post: Avoid overlapping of nodes in tree layout in d3.js about node spacing could potentially help

Community
  • 1
  • 1
Cameron White
  • 245
  • 1
  • 10