[D3] Reuse Transitions in D3 v4

标签：bounce   height   lock   ase   configure   conf   return   challenge   over   

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);
}
    

[D3] Reuse Transitions in D3 v4

标签：bounce   height   lock   ase   configure   conf   return   challenge   over   

原文地址：http://www.cnblogs.com/Answer1215/p/7413817.html