My goal is to build a clickable tree structure; every node is a SVG circle and when clicked it should reveal its (previously hidden) children. At the beginning only the root node is visible. The nodes should position themselves in such a way that they are not so spread out, and I guess the implementation of this will involve setting up a spring-like pulling force that controls the x and y coordinates of each node.
I'm learning React and have set up a function encoding all the SVG elements that make up a node; my problem now is the positioning. I would like to be able to have full control over each SVG element's coordinates but I fear I don't know how to properly do it- should I define a unique svg container for all the nodes? Should I group them someway?
I'm quite lost here. Any help is greatly appreciated!