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>
<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>
</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: