SetInterval, d3 visualisations

[ice]

Hi, 

I was wondering is there an alternative way to create visualisations, not using setInterval at all? I am asking this because I want to be able to pause and resume a visualisation and this won't be possible with setinterval function as the times are specified so it will mess up the timings/durations. I have tried setinterval and I can't seem to think how I can get pause and resume to work with it.  

Any suggestions/help in the right direction will be really appreciated! I am really stuck on this right now. 

Thank you!

[ice]

Or is there anyway to get pause and resume functions to work with setInterval? 

Thank you! 

[Ian Johnson]

you can use d3.timer and control it's pausing or resuming.

related questions:

http://stackoverflow.com/search?q=d3.timer

examples:

http://bl.ocksplorer.org/#/search/d3.timer

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Ian Johnson - 周彦

http://enja.org

[Ethan Jewett]

What Ian said. If you really want to use setInterval, I believe the setInterval function returns and intervalID. You can pass this ID to the clearInterval function to stop the interval from running, and then create a new one when the user resumes.

--

[ice]

Thank you Ian and Ethan for your suggestions. :) I didn't think SetInterval would work because I thought it would clear the timer for the specified ID so when you resume the animations they will be in the wrong order or start again the transition which was incomplete when paused but I will try what you said Ethan. I will keep in mind about d3.timer for my next visualisation.

Thank you once again!

[Ethan Jewett]

I haven't used clearInterval with transitions, but I believe that once an interval has fired, any processing based on that firing will complete regardless of whether the interval is cleared. So I think transitions will complete, not pause. Not sure about what happens if you are using d3.timer.

[Ian Johnson]

d3.timer uses requestAninationFrame which is much more reliable than setTimeout.
if your calculations take longer than the timeout your visualization will start to lag and stutter and possibly not recover. using d3.timer or requestAnimationFrame will keep the browser at a usable FPS.
Also when you lose focus of your page setTimeout will keep running hogging the users resources unnecessarily.

just use d3.timer, its got a nicer interface and will work much better.

[ice]

Thank you Ethan and Ian for your replies. :D

I think I will go with d3.timer now, hopefully won't take too much time to change the implementation and get pause and resume to work. I didn't think setInterval was a good way for the visualisation when I initially started doing it but couldn't think of an alternative way as I am quite new to d3. 
Thanks once again for your suggestion! 

[marc fawzi]

fyi, if you need to control the maximum FPS while using rFA, there is a good way to do that

[Chris Viau]

Here is an example of pausing and resuming a transition: http://xaedes.de/dev/transitions/

ChrisV

[Jonas Langvad]

Very nice example! My social network conditioned self was looking for a "like" button :)

[Marc Fawzi]

Would be nice to turn this into .pause() and .resume() that can be called on selection and make a pull request

Sent from my iPhone

--