Managing large hierarchical data (collapsible tree) with auto-zooming to the expanded node

Question

I am very new to D3 and am trying to visualize a large hierarchical data (something like this) following this. Since every box in my data contains a line of text, no matter how I set the height and width of the container/the tree, the data is not really readable. My JavaScript code is exactly like the tutorial.

I want to create a page that start with the first box, then every time the user click the box, the tree is zoomed to fit to the expanded nodes. and when the user collapse the node it zoom back to where it was. How would this be possible? if this is not easy to make is there a better way of handling this?

This is what I see when I put the internet explorer zoom at 33%:

Answer 1

I found this library which works way better than d3 in this case: https://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html https://philogb.github.io/jit/static/v20/Docs/files/Visualizations/Treemap-js.html