d3.js 动态图表

d3js v5.9.2
使用d3创建动态图表主要使用到了d3.trasition部分的API，通过他们可以完成动画
我的学习记录是通过一个例子了解这些API

会动的柱状图

还是拿之前的例子，代码在此：完整的柱图

修改的代码部分在于创建rect处：

//原来的代码
barContainer.append('rect')
    .attr('height', d => barScale(d))
    .attr('width', barWidth - 1);

加上动画效果后代码如下

barContainer.append('rect')
    .attr('height', 0) //动画开始前状态
    .attr('width', barWidth - 1)
    .transition() //selection.transition() 返回transition
    .duration(1000)//持续时间
    .ease(d3.easeBackInOut)//transition.ease(easing function)，easing function是d3的动画函数，还有很多其他api
    .attr('height', d => barScale(d));//transition.attr()

？？是从上向下绘制的
这里我们可以用rect的y属性控制动画，y表示矩形左上角端点的纵坐标

barContainer.append('rect')
    .attr('height', 0)
    .attr('width', barWidth - 1)
    .attr('y', d => barScale(d)) //y是相对rect父级的g容器的，顶端从底部开始，故值设为矩形的高
    .transition()
    .duration(2000)
    .ease(d3.easeBackInOut)
    .attr('height', d => barScale(d))
    .attr('y', 0);//到g容器顶部

所以过程就是矩形长度向下拉伸，同时位置上移

这样子就完成了动画

更简洁的写法

上面的写法是最简单的写法，但是代码太长或者同一个动画效果多次使用就会很冗杂，我们可通过d3.transition()获得自定义的transition
使用也很简单

//定义transition
let t = d3.transition()
    .duration(2000)
    .ease(d3.easeBackInOut);
barContainer.append('rect')
    .attr('height', 0)
    .attr('width', barWidth - 1)
    .attr('y', d => barScale(d))
    .transition(t) //使用新定义的transition
    .ease(d3.easeBackInOut)
    .attr('height', d => barScale(d))
    .attr('y', 0);

效果相同

总结

d3还提供了其他常用的API，除了用到的ease()，duration()还有delay()等等
代码在这（d3库在build里）

参考资料

第九章 让图表动起来
SVG 图像入门教程——阮一峰
selection.transition()