search

danielcaldas / react-d3-graph

Interactive and configurable graphs with react and d3 effortlessly
https://danielcaldas.github.io/react-d3-graph/sandbox/
MIT License
821 stars 232 forks source link

Cluster nodes together and avoid overlapping nodes #447

Open oshhh opened 3 years ago

oshhh commented 3 years ago

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 Screenshot 2021-03-17 at 2 20 12 PM

Obtained Graph Screenshot 2021-03-17 at 2 15 09 PM

onlyreddy commented 3 years ago

I'm also facing the same kind of issue :(

@antoninklopp @danielcaldas can you please help us!

oshhh commented 3 years ago

@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. `

onlyreddy commented 3 years ago

Yes, I also tried dynamically updating linkLengthsand gravitybut no luck.

danielcaldas commented 3 years ago

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)

link length

exit99 commented 3 years ago

+1 facing similar issue. Also getting all the nodes overlapping in one corner. Followed the simple example in the readme.

image

Saliha-ejaz121 commented 2 years ago

anyone got the solution?

Pavan-Chavan commented 2 years ago

Hello All, I'm also facing similar issue, does any one get the solution for problem ?

Sahilcf commented 1 year ago

anyone got the solution ?

onlyreddy commented 1 year ago

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.