Animation with transitions
D3 transitions are one way of accomplishing this. Transitions use the familiar principle of changing a selection's attributes, except that changes are applied over time.
To slowly turn a rectangle red, we use the following line of code:
We start a new transition with
.transition() and then define the final state of each animated attribute. By default, every transition takes 250 milliseconds; you can change the timing with
.duration(). New transitions are executed on all properties simultaneously unless you set a delay using
Delays are handy when we want to make transitions happen in sequence. Without a delay, they are all executed at the same time, depending ...