react-d3-graph
react-d3-graph copied to clipboard
danielcaldas
Cluster nodes together and avoid overlapping nodes
The graph doesn't cluster nodes together. When a node has a large number of children, it should be automatically pulled to the centre from the forces of all the children. However, I am not able to implement this behaviour using the configuration settings. My graph is coming out to be very scattered.
I can also see that a lot of my nodes overlap with each other which is undesirable. How can I configure the Graph to get a better structure?
Expected Graph
Obtained Graph
I'm also facing the same kind of issue :(
@antoninklopp @danielcaldas can you please help us!
@onlyreddy I think the properties d3.linkLength and d3.linkStrength are not working at all. I tried putting different values but I'm getting the same graph. There is some issue with the forces.
`
Yes, I also tried dynamically updating linkLengths and gravity but no luck.
Hey all, sorry I don't have much time to look into this right now. Maybe someone else can chime in and help? @LonelyPrincess @terahn? But from what I can see the d3.linkLenght works fine. Here's a GIF (see the difference changing it from 10 to 100)
+1 facing similar issue. Also getting all the nodes overlapping in one corner. Followed the simple example in the readme.
Hello All, I'm also facing similar issue, does any one get the solution for problem ?
It's better not to use or rely on this package. Because it's not maintained anymore by the author. The performance of the graph is very bad, it consumes a lot of CPU for simple animation, and you have to implement most of the basic features on your own. However, the support was not there from the component as well.
If at all you want to implement this kind of graph on your own, then use D3JS with a force-directed graph. You can use foreign objects inside SVGS to render any component inside the node. Because the foreign object supports HTML attributes. Then you have to handle the nodes and links position for placing.