D3 Callback Function After .remove()

I'd like to know when all my lines are removed so I can call another function. svg.selectAll('line').transition().duration(2500) .style('stroke-opacity',0).remove(); I know I

Solution 1:

The correct way to do it is to use .each("end", callback). As you point out, this is called once for each element in the transition. You can't change this, but you can add a counter that keeps track of how many elements have been removed:

d3.selectAll("div")
  .call(setupRemove)
  .transition().duration(500)
  .each("end", onRemove)
  .remove();

functionsetupRemove(sel) {
  counter = sel.size();
}
functiononRemove() {
  counter--;if(counter == 0) {
    console.log("all done");
  }
}

Complete demo here. Note that in the special case when you want to run another transition when the first set is finished, you can use just .transition() again.