d3.js transition end event

Question

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\

Answer 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