Nodes out of sight in forceGraph2D with React and Dagre Layout

[rlores-edison]

I'm working with React JS, Vite and Force Graph 2D and trying to display three and more graphs in the browser. They are initially collapsed, so only the initial nodes are previously rendered.

zoomToFit fits the nodes of different graphs in the browser when using small data sets. When using bigger ones the nodes shrink too much in the browser, so to view them I need to zoom out, and this makes the nodes to separate too much and get out of the viewport.

I tried to define a larger virtual canvas to allow nodes to maintain their size. At the end I managed to establish a fixed size for the nodes, not using zoomToFit, the result is that the initial collapsed nodes render with the correct radius, but they are too separate from each other.

I use Dagree for the graphs layout.

The initial nodes of different graphs appear on the browser if I switch to 3D, but I would prefer to continue the project with 2D.

So, can anyone please give me hints, so that I can work my way through? This is the component: https://codepen.io/Raquel-Lores/pen/VwoEVOb

Thanks in advance!

[vasturiano]

@rlores-edison thanks for reaching out.

Your codepen example appears to have errors so I can't get it to run.

If you are seeing too much empty space between the nodes, a quick thing you can try is increase the size of the nodes so they fill up the space in-between. A super quick way to do that is simply to set .nodeRelSize(20) (adjust to taste).

[rlores-edison]

thanks @vasturiano