delay chained transitions

March 15, 2014

Changing an element using multiple, chained transitions requires a little troubleshooting. You would think that just chaining them one after another would suffice:

selection.transition().duration(1500)
    .attr("cx",getX)
    .attr("cy",getY)
    .attr("r", getR)
    .style("fill", getColor)
  .transition().duration(1500)
    .attr("r", doubleR);

But D3 does not wait for one transition to be complete before it begins the next one. Adding a delay will accomplish the desired transition chaining:

selection.transition().duration(1500)
    .attr("cx",getX)
    .attr("cy",getY)
    .attr("r", getR)
    .style("fill", getColor)
  .transition().delay(1700).duration(1500)
    .attr("r", doubleR);