Animation in D3.js
D3.js provides its support to animation by the transition. We may create animation along with a good application of transition. The transition is any limited pattern of the Key Frame Animation along with two of the essential keyframes, which are start and end.
The keyframe start is the DOM’s current state typically, and a keyframe end is a group of the styles, attributes, and other attributes we describe. The transition is well suited to transition for any new view without any complex code that leans over the start view.
Consider the below example:
Example:
In the following example, the color of the background of a document modified from white to lime and to red.
Let’s understand this concept by the following illustration:
Output:
Methods
The three methods are listed below:
1. Duration() Method
This method permits the attribute changes to appear efficiently on any specified duration instead of instantaneously.
Let’s create the transition that will take 5 sec with the use of the following example:
Example:
Output
In the above illustration, the transition has appeared evenly and efficiently. Also, we can assign the code value of RGB color directly with the use of the following code:
2. Interpolate() Method
D3.js supports to following essential interpolate types:
- Interpolate String: It supports string.
- InterpolateRGB: It supports colors.
- interpolateNumber: It supports the numerical values.
The D3 provides the facility to use a proper interpolate technique and some in-advanced cases. Also, we can apply the interpolate techniques directly to grab our essential outcomes. We may even make any new method of interpolation if needed.
Syntax:
3. delay() method
This method permits the transition to grab position after any certain time period.
Look at the following illustration:
Example:
Output:
Transition Lifecycle
The lifecycle of transition is divided into four phases which are as follows:
- Transition scheduled
- Transition starts
- Transition runs
- Transition ends
Transition scheduled
When the transition is created, it is scheduled. If we call the selection.transition method, then we scheduled a transition. This can also be happened if we call the style() , attr(), and another transition to depict the key frame end.
Transition starts
Any transition begins according to its delay, which is described if a transition is scheduled. If any delay wasn’t described, transition begins as early as possible, after the few milliseconds.
When the transition contains a delay, the start value must be set whenever transition starts. Thus, we can implement it through listening to any start event:
Transition runs
If the transition executes, then it will repeatedly invoke along with the values of the transition and it ranges from values 0 to 1. The transition is easy to manage time, distorts time, like, slow-out, and slow-in. A few simple functions can temporarily provides the t values less than 0 and larger than 1.
Transition ends
This phase of the lifecycle represents that the time of ending is exactly one always. Hence, any value in the ending is set if the transition will end exactly. The transition ends according to its duration and delay. When the transition will end, an end event will be dispatched.