d3.js transition end event

问题:

I am applying a transition to a group of nodes returned by selectAll(). I thought the end event would fire after all transitions finished, but each("end",function) gets called at the end of each transition.

So is there any way to set a callback that will be called after transitions on all selected node finishes ?

Should I use call for this? but I don't see it used as end callback anywhere in documentation.

also I can run a counter inside each callback. but is there any way to know how many nodes are still pending to finish transition ? or index of current node in group of selected nodes ?

I've two select() calls in chain like selectAll('.partition').selectAll('.subpartition') so index argument passed to each callback will rotated n times.

回答1:

As far as I know there is not a built in way to know when the last transition of a group has finished but there are ways around it. One way that I have used several times involves maintaining a count of transitions that have finished.

var n = 0;  d3.selectAll('div')    .each(function() { // I believe you could do this with .on('start', cb) but I haven't tested it        n++;    })    .transition()    .on('end', function() { // use to be .each('end', function(){})        n--;        if (!n) {            endall();        }    })  function endall() {     // your end function here } 

Here are the links to the relevant documentation:

• https://github.com/d3/d3-transition#control-flow
• https://github.com/d3/d3-transition#the-life-of-a-transition

回答2:

Here's a clean way to accomplish what you want:

function endAll (transition, callback) {     var n;      if (transition.empty()) {         callback();     }     else {         n = transition.size();         transition.each("end", function () {             n--;             if (n === 0) {                 callback();             }         });     } } 

You can then easily call this function like so:

selection.transition()     .call(endAll, function () {         console.log("All the transitions have ended!");     }); 

This will work even if the transition is empty.

回答3:

I had the same issue

that the call back gets executed with each element

I have solved that using underscore once method

http://underscorejs.org/#once

d3.select("#myid") .transition() .style("opacity","0") .each("end", _.once(myCallback) ); 

文章来源: d3.js transition end event