4

Instead of having a fixed tree size, I am experimenting with using nodeSize for automatic spacing of nodes on a horizontal tree.

So instead of: 

var tree = d3.layout.tree().size([height, width]);

Using:

var tree = d3.layout.tree().nodeSize([height, width]);

See D3 Tree Layout Separation Between Nodes using NodeSize

An issue arises though when the number of child and cousin nodes makes the tree too large vertically for the viewable area.

This begs for an auto zoom function when the tree is expanded if the tree exceeds the viewable bounds of the viewable area.

How would an auto zoom be applied so that the tree is zoomed or scaled to fit the viewable area? Perhaps something similar to d3.js force layout auto zoom/scale after loading

The fiddle below has a parent node with 40 child nodes with tree size determined by nodeSize. When expanded, the tree exceeds the viewable area. The tree also has manual zoom and pan. I am using d3.js version 3.4.11 at the moment.

Fiddle

IlludiumPu36
  • 4,196
  • 10
  • 61
  • 100
  • 3
    Here is a friendly advice: move to D3 v5. You'll have a hard time getting help for v3 here, I for one barely remember v3 methods, so nowadays I just skip v3 questions... – Gerardo Furtado Nov 13 '19 at 03:20

0 Answers0