[D3] Reuse Transitions in D3 v4

D3 transitions start executing as soon as they’re created, and they’re destroyed once they end. This can present some challenges when attempting to create reusable transitions. This lesson demonstrates how to overcome those challenges using various approaches to reusable transitions.

 

We can put reuseable transtion into a function, then use .call() method to use that transition. 

 

d3.select('#block')
    .transition()
        .call(configure, 200, 600, d3.easePolyOut)
        .style('width', '400px')
    .transition()
        .call(configure, 0, 600, d3.easeBounceOut)
        .style('height', '500px')
    .transition()
        .call(configure, 0, 1200, d3.easeQuadOut)
        .style('background-color', 'gold') ;

function configure (transition, delay, duration, ease) {
    return transition.delay(delay).duration(duration).ease(ease);
}