[D3] Animate Transitions in D3 v4

 

D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in new items or tweening existing shapes to display new values, adding transitions is easy. This lesson shows you how to add animations while building on your existing knowledge of D3 selections.

 

d3.select('#block')
    .transition()
        .duration(1200)
        .ease(d3.easeBounceOut)
        .delay(1000)
        .style('width', '400px')
        .style('height', '500px')
        .style('background-color', 'gold');
    

 

 

And we can transition different styles in sequence.

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