引子
繼 Learn D3: Data 第四篇，只是英文翻譯，可修改代碼的部分用靜態圖片替代了，想要實時交互請閱讀原文。
-
版本：Published Mar 24, 2020
正文
在 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 的形狀。
附錄
附
根據源碼，去除了平台依賴，提取了主要代碼，有以下示例：