Delay Chained Transitions

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

Chained Transitions
1
2
3
4
5
6
7
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:

ACTUAL Chained TransitionsGist
1
2
3
4
5
6
7
selection.transition().duration(1500)
    .attr("cx",getX)
    .attr("cy",getY)
    .attr("r", getR)
    .style("fill", getColor)
  .transition().delay(1700).duration(1500)
    .attr("r", doubleR);