码迷,mamicode.com
首页 > 其他好文 > 详细

[D3] Reuse Transitions in D3 v4

时间:2017-08-22 23:09:55      阅读:218      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!