Transition in d3.js gradually interpolate attributes and styles over time, transition is used for animation purpose. It is based on only two key frames, start, and end. The starting key frame defines the current state of the DOM, while the ending key frame is a set of styles, attributes and other properties specified.
| Method |
Description |
| selection.transition() |
this schedules a transition for the selected elements |
| transition.duration() |
duration specifies the animation duration in milliseconds for each element |
| transition.ease() |
ease specifies the easing function, example: linear, elastic, bounce |
| transition.delay() |
delay specifies the delay in animation in milliseconds for each element |
Example :
<!doctype html>
<html>
<head>
<style>
#container {
height: 100px;
width: 100px;
background-color: black;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
d3.select("#container")
.transition()
.duration(1000)
.style("background-color", "red");
</script>
</body>
</html>
