An easing function controls how an animated interpolation changes over time. Instead of moving at a constant rate, a transition can start slowly, accelerate, decelerate, overshoot, or bounce, making chart updates feel more natural. section 7.2.4
Customize a D3 transition by choosing:
- duration(), measured in milliseconds; D3 uses 250 ms by default. section 7.2.4
- delay(), measured in milliseconds; the default delay is 0. section 7.2.4
- ease(), which selects the transition’s rate of change. D3 includes quadratic, cubic, exponential, sinusoidal, circle, polynomial, elastic, overshoot, and bounce behaviors. section 7.2.4
d3.selectAll("#histogram rect")
.data(updatedBins)
.transition()
.duration(500)
.ease(d3.easeCubicOut)
.attr("y", d => yScale(d.length))
.attr("height", d => innerHeight - yScale(d.length));
Apply easing to a histogram update by placing ease() after transition parameters and before the animated attributes. Only properties chained after transition() are animated. section 7.2.4
