D3 callback when all transitions are done

endall.js

function endAll(transition, callback) {
  var n = 0
  transition.each(() => ++n)
    .each('end', () => (!--n && callback.apply(this, arguments)))
}

// Usage
// d3.selectAll('g').transition().call(endAll, allDone)

Clever! Found at http://stackoverflow.com/questions/10692100/invoke-a-callback-at-the-end-of-a-transition#comment65147208_10692220

Here is an updated version

• fixed: If the selection contains zero elements, the callback will never fire.
• added: an error throwing if no callback

https://stackoverflow.com/a/20773846/1061438

It's so infuriating that this isn't built into D3. While clever, this is messy boilerplate code that I'm getting tired of writing over and over again. Synchronising the enter() and exit() is tricky, too.

Seems to be built in now, with Promises.

https://github.com/d3/d3-transition#transition_end

Looks like we can do something like this:

d3.selectAll("g")
  .transition("name")
  .duration(1000)
  .end()
  .then(() => {
    // do something
  });

@phocks you literally saved my life