ease() sets the easing function for a D3 transition, shaping how quickly an animation changes over time. Without it, D3 uses d3.easeCubicInOut. section 7.2.4 section 7.5
Choose an easing family according to the visual motion you want:
- Use an In function when motion starts slowly and accelerates. section 7.2.4
- Use an Out function when motion starts quickly and slows toward its end. section 7.2.4
- Use an InOut function when motion starts and ends slowly. section 7.2.4
- Try elastic, back, or bounce easing for deforming, overshooting, or bouncing motion. section 7.2.4
Ease a histogram transition
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)); Here, ease() makes the bars move quickly at first and slow as they reach their new heights. section 7.2.4
Listing 7.14 Adding a reusable transition (interactions.js)
const handleClickOnFilter = (data) => {
d3.selectAll(".filter")
.on("click", (e, datum) => {
if (!datum.isActive) {
...
const t = d3.transition() #1
.duration(800)
.ease(d3.easeExpOut);
innerChart
.selectAll("circle")
.data(updatedData, d => d.uid)
.join(
enter => enter
.append("circle")
.attr("class", "cetacean")
...
.call(enter => enter.transition(t) #2
...,
update => update,
exit => exit
.call(exit => exit.transition(t)
...)
)
}
});
};
Inspect a reusable transition that applies the same duration and easing function to entering and exiting circles. section 7.4.3
