how to listen for the transition "end" event?

[wimdows]

Hello there,

Both in the documentation and in this forum I have been reading the
advice to "listen for a transition end event".
Now, there are several occassions on which I would love to be doing
just that.

So I would love to see a simple working example of code that does
this.

More specifically, what I'm looking to learn of steal or whatever you
want to call it, is a way to change a year, then have something(s)
change color (or whatever), then up the year, change the colors, up
the year again, change the colors, etcetera.

Currently I use a JavaScript step function (thanks again for that,
Jason).
It works. But it is not very easy to co-ordinate between the
duration(s) of the D3 transitions and the timing parameters of the JS
function.

As Jason suggested in another thread, it would be much neater if one
could stick transitions back to back with event listeners. The
documentation also tells me I can do this, but not how to do it.

To get even more specific: I want to change the fill colors of the
countries on a map, year by year, based on the variables in my data
files.

In any case: thanks for listening so far!

Regards,

wim

[Mike Bostock]

There are two examples I can think of off-hand that use the "end"
event to do staged transitions. The stack-to-group transition, and the
donut transition:

http://mbostock.github.com/d3/ex/stack.html
https://github.com/mbostock/d3/blob/master/examples/donut/donut.html

All you need is to say transition.each("end", callback):

https://github.com/mbostock/d3/wiki/Transitions#each

Note that because each element may have a different delay and
duration, you receive an "end" event per element, rather than just one
for the entire selection.

Mike

[wimdows]

So, just to make sure, if I have something like this:

function changeColors {
//if some criterium is met stop repeating changeColors and do
something else
//if not
//advance year
//change the colors
.transition.each("end", changeColors);

that should do the trick?

[Mike Bostock]

Well, d3.select(this).transition().each("end", changeColors). Here's
another example:

http://bl.ocks.org/1125997

Mike

[wimdows]

Thanks, Mike. I´ll go and play around with it.
Cool animation, that! :)

[Jon Frost]

Note how in this example that "some" of the links in the chain start to
disconnect over time and some mouse clicks - http://bl.ocks.org/1125997.

This happens in Chrome and Firefox, though more readily in Firefox I
think. There are no mouse events specified in the user's script.

[Sinan Aşçıoğlu]

Hey Mike,

I am having a similar issue: I would like to display a message like "Chart Ready!" and start another action after all the transitions end. Is there a way to listen/catch when all transitions ending, instead of catching each individual transitions?

[sha...@gmail.com]

I'd also like to know if there's a way to listen for when all the transitions end. When adding delays, it's hard to use the each(end) thing cleanly.

[Simon Russell]

There has been discussion of this at various times, it seems that it's not in there now either.  Mike's explanation is here:

http://bost.ocks.org/mike/transition/#per-element

And here's a more recent thread:

https://groups.google.com/forum/?fromgroups=#!topic/d3-js/WC_7Xi6VV50

Counting seems like a reasonable approach; you could build a little thing to wrap it up nicely, if you're doing it in lots of places.

--
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/groups/opt_out.