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

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.