9、数据可视化中的 D3 过渡动画全解析

数据可视化中的 D3 过渡动画全解析

一、引言

俗话说：“一图胜千言”，在数据可视化领域，这句话体现得淋漓尽致。动画由一系列快速连续的静态图像生成，人类的眼脑系统借助正后像、似动现象和β运动，能产生连续图像的错觉。正如 Rick Parent 所说：“图像能快速传达大量信息，因为人类视觉系统是复杂的信息处理器，动态图像在短时间内有潜力传达更多信息，人类视觉系统进化为在不断变化的世界中生存，它旨在注意并解读运动。”这正是数据可视化项目中使用动画的主要目标。

二、什么是过渡（Transition）

D3 过渡能在网页上使用 HTML 和 SVG 元素创建计算机动画，它实现了基于插值的动画。计算机非常适合进行值插值，因此大多数计算机动画都是基于插值的。过渡建立在插值和比例尺之上，通过指定起始值和结束值（动画中的关键帧），不同算法和插值器会逐帧填充中间值（“补间”）。虽然乍一看，这似乎是一种不太可控的动画创建方式，但实际上，基于插值的过渡能为每一帧的运动提供直接而具体的预期，为动画师提供强大的控制能力。而且 D3 过渡 API 设计精良，在大多数情况下，只需几行代码就能实现数据可视化项目所需的动画。

三、单个元素的动画

1. 准备工作

在浏览器中打开以下文件的本地副本：

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter6/single-element-transition.html

2. 代码实现