D3js基础课12：过渡效果

动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化过程的。而这个变化过程在 D3 里我们称之为过渡（transition）。

添加过渡效果到条形图上

该 API 的功能为启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等）

<script src="https://d3js.org/d3.v6.min.js"></script>
<p id="click3">Click to Update</p>
<div id="view011201"></div>
<script>
    data = [120, 140, 150, 180]  // define width is array

    svg = d3.select("#view011201")
        .append("svg")
        .attr("width", 250)
        .attr("height", 150)
    chart = svg     // select svg
        .selectAll('rect')
        .data(data).enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d,i) {return i * 30})
        .attr('width', function(d) {return d})
        .attr('height', 25)  

    d3.select("#click3")
        .on("click", function() {  // Event listener - later about that!
            // create random data
            data = [Math.round(Math.random()*120), 
            Math.round(Math.random()*140), 
            Math.round(Math.random()*150), 
            Math.round(Math.random()*180)]         // Custom function, we can write your own!
            // update rect widths with enw data
            svg
                .selectAll("rect")     // select rects to be updated
                .data(data)            // New data binded to rects
                .transition()          // 启动过渡
                .attr('width', function(d) {return d}) // visual attribute to be updated
        })
</script>

transition

添加持续时间

该 API 的功能为指定过渡的持续时间，单位为毫秒。

            // update rect widths with enw data
            svg
                .selectAll("rect")     // select rects to be updated
                .data(data)            // New data binded to rects
                .transition()          // 启动过渡
                .duration(1000)        // 指定过渡的持续时间 in milliseconds

duration

添加扭曲

Easing 是一种通过扭曲时间来控制动画中的表现形式的方法。通常被用来 slow-in, slow-out。通过对时间的缓动，animated transitions 会更平滑且运动过程也更合理。

该 API 的功能为指定过渡的变化方式，常用的有：

linear：普通的线性变化；
circle：慢慢地到达变换的最终状态；
elastic：带有弹跳的到达最终状态；
bounce：在最终状态处弹跳几次；

            // update rect widths with enw data
            var linear = d3.easePoly.exponent(1),
                quad = d3.easePoly.exponent(2),
                cubic = d3.easePoly.exponent(3);                                 
            svg
                .selectAll("rect")     // select rects to be updated
                .data(data)            // New data binded to rects
                .transition()      // Just this single magical line
                .duration(1000)  // in milliseconds
                .ease(linear)   // among cubic, poly, sin, bounce, elastic

ease

反弹效果

            // update rect widths with enw data
            var linear = d3.easePoly.exponent(1),
                quad = d3.easePoly.exponent(2),
                cubic = d3.easePoly.exponent(3);  
            svg
                .selectAll("rect")     // select rects to be updated
                .data(data)            // New data binded to rects
                .transition()      // Just this single magical line
                .duration(1000)  // in milliseconds
                .ease(quad)   // among cubic, poly, sin, bounce, elastic

quad

添加延迟

指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。

            // update rect widths with enw data
            svg
                .selectAll("rect")     // select rects to be updated
                .data(data)            // New data binded to rects
                .transition()          // Just this single magical line
                .duration(1000)        // in milliseconds
                .delay(400)            // 延迟

delay

关于代码运行效果

由于在简书上不能展示代码的运行结果，我在网上搭建了一个 jupyter notebook http://jupyter.cyber-life.cn/lab，我将本套教程的笔记和源代码写在了上面，可以在线查看代码运行效果，还可以调试代码，有需要的同学私信我。