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()