Skip to content
Related Articles

Related Articles

Improve Article

D3.js selection.transition() Function

  • Last Updated : 23 Sep, 2020

The selection.transition() Function in D3.js is used to get the new transition on the given selection with the specified name. The new transition is only exclusive with other transitions of the same name.

Syntax:

selection.transition([name])

Parameters: This function accepts the following parameter as mentioned above and described below:

  • name: This parameter is the transition instance.

Return Value: This function returns a new transition on the given selection with the specified name.

Below programs illustrate the selection.transition() function in D3.js.



Example 1:




<!DOCTYPE html> 
<html
<head
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"
    </script>
      
    <style>
        #GFG {
            height: 200px;
            width: 200px;
            background-color: black;
        }
    </style>
</head
       
<body
    <center>
        <h1 style="color: green;"
            Geeksforgeeks 
        </h1
         
        <h3>D3.js | selection.transition() Function</h3>
             
        <div id="GFG"></div>
             
        <script>
            d3.select("#GFG")
                .transition()
                .style("background-color", "red");
        </script
    </center>
</body
</html>

Output:

Example 2:




<!DOCTYPE html> 
<html
<head
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"
    </script>
</head
       
<body
    <center>
        <h1 style="color: green;"
            Geeksforgeeks 
        </h1
         
        <h3>D3.js | selection.transition() Function</h3>
             
        <button onclick="triggerTransition()">Click</button>
  
        <div>
          <svg width="400px" height="200px">
              <rect
                id="rectArea" x="50" y="50"
                width="100" height="100" stroke="black"
                fill="purple" stroke-width="5"/>
          </svg>
        </div>
             
        <script>
            function triggerTransition(){
                d3.select("#rectArea")
                    .transition()
                    .delay(100)
                    .duration(2000)
                    .attr("width", "330")
            }
        </script
    </center>
</body
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :