react-d3-graph
react-d3-graph copied to clipboard
Disable user from accidentally pausing first render animation
Hi All!
Loving this component and been working with it quite a lot recently. I'm having an issue understanding something around the first render.
I've noticed when the first render occurs, if I have my cursor over a node that is connected to other nodes, it pause the initial animation and distorts the diagram. The nodes then get very spaced apart and it's not really readable.
I went through the documentation and searched for other sources and I can't see anything specific. I tried changing settings in the config but that doesn't make any difference.
The nodes always get created from the top left and move to the middle of the diagram. I was wondering:
- Is there a way to specify the nodes to get created in the middle of the screen (rather than top left)?
- And/Or is there a way to disable the user from hovering and pausing the initial animation?
In terms of action I have only 'onClickNode' enabled rather than hover or anything else.
Thank you! :)
Hi @mermicode ,
Could you please provide a minimal reproduction link (using codesandbox for example)? Explaining, what it the current behaviour with this specific example and what you would expect.
Moreover, you can specify the x and y coordinates when you pass data to the graph, it will allow deciding exactly where the nodes will be rendered and remove some of the "randomness" of the initial render. You can, for example, find an example of static graph where there is no initial animation here.
I hope this answers some of your questions !
I believe this is the same issue im seeing with https://github.com/danielcaldas/react-d3-graph/issues/387
With a large graph it takes time for animation to complete and if user starts to interact with the graph nodes will not finish animating.
Thanks for the hint @michaelbdavid, @antoninklopp; if you agree that this and #387 overlap, shall we move all the detail onto #387 and close this one as a duplicate?
@antoninklopp sorry I just saw this and thank you for the response and especially for the x, y coordinate suggestion :) @michaelbdavid just had a read of #387 and you're right it's similar. It's kind of strange actually, sometimes the animation runs fine other times if there is something else going on it stops the animation I think your suggestion of having some sort of a handler could definitely help! @danielcaldas yes, I would consider this as being a duplicate.
Oh just had an idea on how you can work around this in the meantime. In the latest version 2.6.0, we've released a new functionality freezeAllDragEvents.
Maybe it's not 100% ideal, but this can prevent users from messing around with the graph by dragging things around.