Transitions

Until now, you learned a lot about animation, timers, interpolation, and easing, but does it really need all of this to do simple animations in D3. No; luckily, not as long as we use simple transitions. A Transition is an animation from a start state to one end state. The term is often used for animations in general and vice versa, but I want to emphasize that a transition is a simple animation that is defined by two states only; here, the interpolation between these states is automatically created from these states.

D3 has a very powerful support to create transitions. The only thing we have to do is to provide the starting state, call the .transition() method on a selection, and finally provide the ending state and D3 will take care of the rest. The .transition() method will return an object that is very similar to a selection and has most of its methods. In addition, it provides the .duration(duration), .delay(delay), and .easing(easingType) functions to define the duration...