本文假定读者有一定 javascript 和 D3 (《如何自学 D3》) 基础，若对 web 开发不太熟悉的同学，可先行了解下 js 中的高阶函数、this指向等知识，以便更容易理解代码。
Dashboard中经常会有数字动效的制作需求。
比如这种：
demo地址: https://github.com/mark0322/xCharts/tree/master/charts/Text
或者这种：
demo地址: https://github.com/mark0322/xCharts/tree/master/charts/Donut
今天，我们就来聊一下，如何用 D3 制作数字动效。
D3 中的动画效果通过 d3-transition 模块实现。
这里简述一下动画原理：我们小时候都见过下图的翻书动画，即短时间内出现多张"相近"的图片，人的视觉会将这些快速闪现的静态图片感知为动画。
图片来自网络
任何动画、视频都是基于此原理，d3-transition 的动画原理也是如此。
话不多说，我们先看下第一张动图 数字动画的核心代码：
// 定义 动画 的持续时间为 1.5S
const t = d3.transition().duration(1500);
// SVG 画布上添加文字，并加入动画
svg.append('text')
.transition(t)
.text(9999) // 设定数字的最终值
.tween('d', function() {
// [注1]：获得数字的终止值
const val = d3.select(this).text();
// [注2]：定义插值函数
const i = d3.interpolateNumber(0, val);
// [注3]："动画函数"
return t => {
// [注4]：通过 插值函数 与 tween() 结合，绘制动画
d3.select(this).text((i(t) | 0);
// console.log(t, i(t));
}
});
[注1]：获得数字的最终值：9999。
[注2]：因为数字动画为0 ~ 9999的动画，所以用插值函数将0 ~ 9999 “归一化”为0 ~ 1的映射，以便后续动画函数中调用。eg: i(0.1) -> 999.9 i(0.5) –> 4999.5
[注3] + [注4]：如上文所述的动画原理，.tween() 的原理为：将2s的动画切成2s内的很多个“时间切片”，每个“时间切片”均执行“动画函数”，该“动画函数”的参数 t 即为 0~1 (归一化) 的对应值。
很晕是不是？分别打印出t / i(t) 的值，你就会明白了~
