D3 4.x数据可视化实战手册（第2版）

第4章　张弛有“度”

本章涵盖以下内容：

• 使用连续尺度
• 使用时间尺度
• 使用有序尺度
• 字符串插值
• 颜色插值
• 复合对象插值

4.1　简介

作为数据可视化开发者，我们总是在反复做一个非常关键的事情：将数值从数据领域映射到图形领域。例如，将最近一次453美元的采购映射为一个653像素的长条；又如，将昨晚23.59美元的酒吧账单映射为一个34像素的长条。从某种程度上讲，这就是数据可视化的所有内容——将数据高效、准确地映射为图形。因为这是数据可视化及动画展示（在第6章，我们将对动画进行详细介绍）中必不可少的一项内容，所以D3对此提供了大量健壮的支持，而这也正是本章要重点介绍的内容。

什么是尺度

D3提供多种称为scale的结构来支持从数据模型到可视化模型的映射。正确理解这些概念非常重要，因为尺度不仅用于前面提到的映射，而且也是D3中其他组件的基础，例如过渡（transition）和坐标轴（axes）。

尺度到底是什么呢？简单来说，尺度可以视为数学函数。数学函数与命令式编程语言中的函数（例如JavaScript中的函数）是不同的。在数学中，函数是两个集合之间的映射。

假设A和B为两个非空集合。函数f是A到B的一个映射，使得集合A中的任何一个元素在集合B中都有唯一的元素与它对应。当元素b是集合A中的元素a通过函数f映射到集合B中的唯一元素时，记作f(a)=b。

——K. H. Rosen（2007年）

虽然这个定义很枯燥，但是不得不承认它很好地描述了将各个元素从数据映射至图形领域的过程。

另外两个非常重要的基本概念分别是函数的定义域和值域。

如果f是一个从集合A到集合B的函数，我们说集合A是f的定义域，集合B是f的值域。如果f(a)=b，则我们称b为a的像，a是b的原像。函数f的值域或者像，是集合 ...