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