D3比例尺深度剖析：线性（d3.scale.linear）与序数（d3.scale.ordinal）的原理与实践

d3.scale.linear 和 d3.scale.ordinal（注意：在 D3 的较新版本中，这些函数已经被重命名为 d3.scaleLinear 和 d3.scaleOrdinal）是用于在数据值（通常是数值或分类值）和屏幕坐标之间建立映射的缩放函数。这两种缩放函数在 D3.js 中非常常见，但它们的用途和用法是不同的。

d3.scaleLinear（或 d3.scale.linear）

d3.scaleLinear 是一个线性缩放函数，它接受一个连续的数值域（domain）并映射到一个连续的范围（range）。通常，它被用于将数据值（例如，高度、宽度、位置等）映射到 SVG 的坐标空间上。

用法：

var linearScale = d3.scaleLinear()  
    .domain([0, 100]) // 输入的数值范围  
    .range([0, 500]); // 输出的坐标范围  
  
var result = linearScale(50); // 输出：250

在这个例子中，数值 50 被映射到坐标 250。

d3.scaleOrdinal（或 d3.scale.ordinal）

d3.scaleOrdinal 是一个序数缩放函数，它接受一个离散的、分类的域（domain）并映射到一个连续或离散的范围（range）。序数缩放通常用于分类数据，如颜色、形状或符号。

用法：

var ordinalScale = d3.scaleOrdinal()  
    .domain(['A', 'B', 'C']) // 输入的分类值  
    .range(['red', 'green', 'blue']); // 输出的颜色值  
  
var color = ordinalScale('B'); // 输出：'green'

在这个例子中，分类值 'B' 被映射到颜色 'green'。

注意事项

连续性：d3.scaleLinear 是连续的，而 d3.scaleOrdinal 是离散的。
范围：d3.scaleOrdinal 的范围可以是连续的（例如，颜色条带），也可以是离散的（例如，一组固定的颜色）。
插值：由于 d3.scaleLinear 是线性的，它支持插值（即，在域中的两个值之间平滑过渡）。而 d3.scaleOrdinal 不支持插值，因为它处理的是分类数据。
用途：d3.scaleLinear 通常用于绘制连续的数据（如线图、直方图等），而 d3.scaleOrdinal 用于分类数据（如饼图、条形图等）。