Learn D3.js

Multiple transitions

We have seen that if you call transition() on an existing transition chain, it will be scheduled to run as soon as the previous transition ends. For example, in following code (see Transitions/15-sequential.html), the circle will grow for two seconds, move down for two more seconds, and change from red (the color defined in CSS) to yellow in another two seconds:

svg.append("circle")        .attr("r", 30)                                  // initial size        .attr("transform", `translate(${[400,300]})`)   // initial position        .transition().delay(500).duration(2000)         // transition 1          .attr("r", 100)                               //   final size        .transition().duration(2000)                    // transition 2          .attr("transform", `translate(${[600,500]})`) //   final position        .transition().duration(2000)                    // transition 3 .style("fill", ...