共计 2115 个字符，预计需要花费 6 分钟才能阅读完成。
引子
继 Learn D3: Data 第四篇，只是英文翻译，可批改代码的局部用动态图片代替了，想要实时交互请浏览原文。
- 原文：Learn D3: Scales
- 版本：Published Mar 24, 2020
- Origin
- My GitHub
注释
在 D3 数据图形所有工具中，最根本的是比例尺，它将数据的形象维度映射到可视变量。
为了尝试，看看这些小（但美味！）水果的数据集。
咱们通常认为维度是空间的，比方三维空间中的地位，但形象维度不肯定是空间的。它可能是定量的，例如下面每个水果的 count。或者它可能是名义上的，比方一个 name。
在 Semiology of Graphics 中，Jacques Bertin 形容了点和线等图形标记如何“示意差别(≠)、相似性(≡)、量化程序（Q）或非量化程序（O），并且组、档次或垂直挪动的示意”能够应用地位、大小、色彩等。这些图形标记属性是咱们的视觉变量。
与许多可视化一样，上面的条形图将两个形象维度映射到两个可视变量：name 维度映射到条形图的 y 地位，而 count 维度映射到 x 地位。这些映射由上面的 x 和 y 比例尺实现。
（请随便编辑代码，看看会产生什么！）
D3 比例尺有多种类型。应用哪一种取决于形象维度（定量的还是象征性的？）和视觉变量（地位或色彩？）。这里 x 是线性比例尺，因为 count 是定量的，条形长度应该和数值成比例，而 y 是分段比例尺，因为 name 是象征性的，并且条形厚厚的。
每个比例尺都是通过从形象数据（domain）到可视变量（rang）成对进行配置的。例如，x-domain 的下限值（0）映射到 x-range 的下限值（图表的左边缘），domain 的上限值（最大计数）映射到 rang 的上限值（右边缘）。
对于线性比例尺，domain 和 rang 是间断的距离（从 最小 到最大）。对于分段比例尺，domain 是离散值的数组(🍊、🍇、🍏、…) 而 rang 是一个间断区间；分段比例尺主动确定如何将范畴宰割为离散的填充分段。
下面的比例尺是应用 办法链 配置的。这种简洁的格调是可行的，因为配置比例尺的办法（如 scale.domain）会返回比例尺。上面是等效的书写形式。
如果在没有参数的状况下调用比例尺办法，也能够应用 Scale 办法检索它们的关联值。这对于失去新比例或调试十分有用。
什么是 D3 scale？一个函数。调用它将返回与给定形象值（如 count）对应的可视值（如 x 地位）。
依照常规，大多数 D3 图表将边距利用于插入比例范畴，并为轴留出空间。因而，x(0) 通常不是零；这是右边距的大小。
这些比例尺返回的 xy 地位是一个点，例如 [x=640，y=30]。但因为条形不是无限小，它们有一个宽度和高度，这个地位对应条形的右上角。条形的宽度为 x(count)-x(0)，其高度由分段比例尺的 y.bandwidth() 定义。
让咱们更进一步看看比例尺是如何应用的。上面是一个独自条形的代码。
下面的代码是一个 HTML 标记的模板文本，html\`……\` 在 Observable 是一种出现 HTML 标记的不便办法。动静表达式，例如条形的宽度，能够作为 ${…} 字面量嵌入。
HTML 字面量的真正魔力在于，嵌入的表达式能够是 DOM 元素，甚至能够是 DOM 元素的数组！因而，咱们能够通过将数据映射到 SVG 元素来同时生成所有条形。
（这些嵌套表达式应用 svg\`…\` —— Observable 的模板字面量，专门用于 SVG 标记，而不是 HTML 标记，因为 SVG 元素有本人的 XML 命名空间。对于内部 SVG 元素，你能够应用 svg\`…\` 或 html\`…\`，但在外部，SVG 字面量因为命名空间是必须的。）
应用比例尺的另一个很好的起因是 D3 提供了明确显示地位比例编码的轴，以及良好的、人类可读的刻度。轴进步了图表的可读性，帮忙你进行交换。
D3 轴须要选择器，到目前为止，咱们始终防止应用申明性 HTML 模板字面量。但如上所示，两者能够谐和地配对。
为了增加轴，咱们首先应用 svg\`……\` 创立一个（尚未拆散的）G 元素。而后咱们通过将该元素传递给 d3.select 来抉择该元素。之后咱们调用 selection.call 一次将轴渲染到 G 元素中，而后再次移除域门路（对于极简格调）。最初，咱们通过调用 selection.node 获取 G 元素，并将其嵌入内部字面量中。
地位是最强的视觉变量，所以到目前为止咱们对比例尺的探讨都集中在地位上，这不是偶合。
然而，比例尺能够用于其它视觉变量，例如色彩。🌈
下面的代码定义了一个程序比例，它相似于线性比例，不同的是它的范畴依赖于插值器。插值器是一个函数，它取 0 到 1 之间的值，返回相应的视觉值。通常，此插值器是 D3 的内置配色计划之一。
传递色彩刻度返回相应的色彩字符串。
当初咱们能够在条形图中增加额定的编码，将 count 映射到 color 以及 x 地位。为了记录色彩编码，相似于地位编码的轴，咱们将引入 D3 色彩图例。
有些可视化须要专门的图形标记，这些标记不是 SVG 或 Canvas 内置的。接下来，咱们将越过根本条形图，并理解 D3 的形态。
Next
附录
附
依据源码，去除了平台依赖，提取了次要代码，有以下示例：
- 示例 1
- 示例 2
- 示例 3
- 示例 4
- 示例 5
参考资料
- Learn D3: Scales
