Export ability to stop animation about 3d-force-graph HOT 8 CLOSED

@ChRonX13 @sharkaev thanks for reaching out.

You can control the simulation engine using the various tick counter methods: warmupTicks, cooldownTicks and cooldownTime. Warmup refers to the phase before beginning to render, and cooldown from render start until freezing the engine.

So for example, if you'd like to immediately stop the simulation engine you can just do:
Graph.cooldownTime(0)

As for large graphs, you can let the engine dry-run through the iterations before starting to render, and then render just once to force it to jump directly into the final state. Something like:
Graph .warmupTicks(300) .cooldownTicks(0)

Here's an example of this approach applied to a larger data set:
https://bl.ocks.org/vasturiano/34e0ac2ad391e33ad5dde43ec7ce3d40

Also worth mentioning is that 1 billion nodes will be extremely problematic no matter what you do. That is well beyond the volume of elements that the browser will be able to handle.

from 3d-force-graph.

same issue. I have over 1 biilion nodes. and it's difficult to render first animation.
P.S. Your web component is awesome!

from 3d-force-graph.

@vasturiano apologies if my terminology are incorrect! I guess I'm not referring to the 'simulation' engine itself...in fact, I'm already using those above parameters to freeze the visualisation at a given period of time. What I have found is that even though once the graph has finished 'settling', there is still a large number of requests from the requestAnimationFrame(animate); call.

Now in the scenario where we do have a large number of visual elements on the screen, the amount of processing time to re-render the visualisation can drastically slow down (depending on hardware). In my particular scenario, even when I navigate away from the current canvas to another part of my application, these animation frame callbacks are still occurring, even with the visualisation not actually on the screen anymore. This below image is a profile after the visualisation has loaded but after I have navigated to another page in my application.

My current workaround has been to execute the following logic upon navigation away from the visualisation given that I do not have a reference animate object that you used when requesting the original animation.

for (var i = 1; i < 99999; i++) { window.cancelAnimationFrame(i); }

My hope, if you agree, was that we could programatically get a handle or a binding to allow us to request a stop of this animation for various scenarios (eg. page navigation, if modals were overlayed on top of the visualisation to display other information etc).

Hope that makes sense!

Once again, many thanks for your efforts in your components and libraries! Have been thoroughly impressed and grateful for your contributions! :)

from 3d-force-graph.

Ok, I see. Thanks for the explanation @ChRonX13.

I've added a method to the component which lets you do this: stopAnimation(). If you use the latest version of the library (1.21.0) you should be able to cancel the rendering cycle and save some performance.

Let me know if it works for you!

from 3d-force-graph.

@vasturiano looks great! working a treat :) many thanks again :)

from 3d-force-graph.

@vasturiano how do i restart the animation after using the stopAnimation()

from 3d-force-graph.

@jsslngz .resumeAnimation(). Also, to pause the animation you should use the new name: .pauseAnimation()

from 3d-force-graph.

@vasturiano Thank you very much, your message helped me a lot.

from 3d-force-graph.