Hi. I'm working with a React component and I'm trying to resize and space my nodes out naturally. There's overlapping now and I need to push them out they they can't overlap. I'm not trying to simulate anything, I just want the force direct layout to ensure that a group of nodes connected to another central node don't cluster together so they can't be viewed. I want to ensure that each node in a 2D graph is represented clearly, even if it means the view has to zoom out to see it all.

I looked at the collision demo but it's not clear to me what's going on here. Variables like N and nodes aren't obvious. I'm also working with a React component class so there's some refactoring going on in my head.

https://github.com/vasturiano/react-force-graph/blob/master/example/collision-detection/index.html

How can I adjust/customize node bounding boxes? Any help is appreciated. Thanks.

As a bonus question, for layouts like left-to-right, when a node is not connected (like say I have a tree and 2 disconnected nodes) the vertical spacing between the disconnected nodes is very wide/tall, and the connected nodes are bundled over top of each other, very tight. How do I adjust the spacing between nodes altogether? (I think this might be tided up/related to my initial question). Thanks.