Transition API in D3.js

The term transition helps you to animate the transition of DOM (Document Object Model) component from one state to another. The transitions methods can be applied to change the property for smooth transitions for stated time duration. The D3 transitions choose the components and apply a transition to a current element.

Configuration of Transition API

You can configure the Transition API as shown in below script.

<script src = “https://d3js.org/d3-color.v1.min.js”></script>   
<script src = “https://d3js.org/d3-dispatch.v1.min.js”></script>  
<script src = “https://d3js.org/d3-ease.v1.min.js”></script>  
<script src = “https://d3js.org/d3-interpolate.v1.min.js”></script>  
<script src = “https://d3js.org/d3-selection.v1.min.js”></script>  
<script src = “https://d3js.org/d3-timer.v1.min.js”></script>  
<script src = “https://d3js.org/d3-transition.v1.min.js”></script>
<script></script>

Methods of Transition API

In the D3.js, the transition API methods are divided into two following types.

Selection Methods
Timing Methods

Now, we will discuss each method category in detail.

Selection Method

In this category, we have some selection element methods explained below.

selection.transition([name])

It can be applied to return a new selection transition with the name. If you don’t specify the name of transition then it will return the empty value.

selection.interrupt([name])

This method helps you to brake off the chosen transition elements with their names. It is described in below code.

selection.interrupt() .selectAll(“*”). Interrupt();

d3.transition([name])

This method can be applied to return a new transition containing the stated name.

d3.interrupt(node[, name])

It can be applied to interrupt the transition of the stated name over to a described node.

transition.select(selector)

This method allows you to select the first element and compare it with the defined selector. It also returns a transition on the output selection. It is explained below.

transition
            .selection()
            .select(selector)
            .transition(transition)

transition.merge(other)

This method can be applied to combine the two given transitions. It is defined below.

transition
            .selection()
            .merge(other.selection())
            .transition(transition)

transition.filter(filter)

If you want to choose the transition elements equivalent to the defined filter, then you need to apply this method. It is shown in below code.

transition
            .selection()
            .filter(filter)
            .transition(transition)

transition.transition()

It can be applied to return a new transition on the selected components. This method executes when the transition stops. After it, the new transition contains the properties of the last transition such as duration, name, and the easing.

For Example

Here, we have an example to understand the following concept.

d3.selectAll(“.body”)
     .transition()
.style(“fill”, “purple”)                      // Dissolve to purple
.transition()
.delay(6000)             // Wait  for 6 sceond, it will change into red and then remove
.style(“fill”, “red”)
.remove();

d3.active(node[, name])

This method can be used, if you want to return the transition with the name over to a defined node.

Timing Method

In this category, we have some timing methods that are explained below.

transition.duration([value])

This method can be applied to fix the duration of the transition for a described value. If the value is undefined, then it will return the existing first value of the transition.

transition.ease([value])

You can apply this method while easing the transition values of chosen elements. This method is invoked for animation frames. It goes through the normalize time denoted by ‘t’ for {0, 1} range. If you don’t define the value of the function, then it will return the existing function for the primary element.

transition.delay([value])

It can be applied to fix the transition delay to the values. When a function is calculated for the components, then the function can be passed from the existing datum “d” and index “i” with the DOM element. If you don’t define the value, it returns the existing value of the first delay component.

It is explained in the below code.

transition.delay(function(d, i)
{
            return i * 10;
});

← Prev Next →