Handling Graphs with many nodes responsively

[act-naturally]

Hi,

Am running into an issue with handling graphs of various sizes. I currently render a graph ( layout is left (root) to right ) with some nodes. The graph never goes beyond 4 levels of children. Graph nodes are simple circles with some name as text above.

The issue I run into is, if a node has many children, the links and graph text are not sized responsively and start overlapping.

I have managed to somehow resolve this by using and for the larger graphs, essentially increase the viewbox. This works fine, I have pan and zoom there so users can at least zoom in and no nodes overlap. However, the size of the viewbox itself is something I need to somehow calculate (perhaps on total number of nodes?). I am wondering if anyone has any other better way to have the Graph ( nodes, links, text, any svg really) to "fit" the viewport responsively without many calculations upfront. Essentially handle showing a graph with small number of nodes (50) where node text/size is legible and if many nodes (1000), size the nodes and text quite small and allow users to zoom/pan as needed such that no nodes overlap.