跳至內容

量化比例尺

量化比例尺類似於 線性比例尺,但它們使用離散而非連續的範圍。連續的輸入域會根據輸出範圍中的值數量(,基數)劃分為均勻的區段。每個範圍值 y 可以表示為域值 x 的量化線性函數:y = m round(x) + b。請參閱 量化色塊圖 以取得範例。

scaleQuantize(domain, range)

範例 · 原始碼 · 建立一個新的量化比例尺,其具有指定的 domainrange

js
const color = d3.scaleQuantize([0, 100], d3.schemeBlues[9]);

如果未指定 domainrange,則它們各自預設為 [0, 1]。

js
const color = d3.scaleQuantize(d3.schemeBlues[9]);

quantize(value)

範例 · 原始碼 · 給定輸入 網域 中的,傳回輸出 範圍 中對應的值。例如,套用色彩編碼

js
const color = d3.scaleQuantize([0, 1], ["brown", "steelblue"]);
color(0.49); // "brown"
color(0.51); // "steelblue"

或將網域分成三個大小相等的部分,並使用不同的範圍值來計算適當的線條寬度

js
const width = d3.scaleQuantize([10, 100], [1, 2, 4]);
width(20); // 1
width(50); // 2
width(80); // 4

quantize.invertExtent(value)

範例 · 原始碼 · 傳回 網域 中值 [x0, x1] 的範圍,以對應 範圍 中的quantize 的反函數。這個方法在互動時很有用,例如用來決定滑鼠游標下對應網域中的值。

js
const width = d3.scaleQuantize([10, 100], [1, 2, 4]);
width.invertExtent(2); // [40, 70]

quantize.domain(domain)

範例 · 原始碼 · 如果指定網域,則將比例尺的網域設定為指定的兩個數字元素陣列。

js
const color = d3.scaleQuantize(d3.schemeBlues[9]);
color.domain([0, 100]);

如果給定陣列中的元素不是數字,它們將會被強制轉換為數字。這些數字必須是遞增順序,否則比例尺的行為將是未定義的。

如果未指定網域,則傳回比例尺目前的網域。

js
color.domain() // [0, 100]

quantize.range(range)

範例 · 原始碼 · 如果指定範圍,則將比例尺的範圍設定為指定的值陣列。

js
const color = d3.scaleQuantize();
color.range(d3.schemeBlues[5]);

陣列可以包含任意數量的離散值。給定陣列中的元素不一定是數字;任何值或類型都可以使用。

如果未指定範圍,則傳回比例尺目前的範圍。

js
color.range() // ["#eff3ff", "#bdd7e7", "#6baed6", "#3182bd", "#08519c"]

quantize.thresholds()

範例 · 原始碼 · 傳回 網域 內計算出的閾值陣列。

js
color.thresholds() // [0.2, 0.4, 0.6, 0.8]

傳回的閾值數量會比 範圍 的長度少一個:小於第一個閾值的數值會指定為範圍中的第一個元素,而大於或等於最後一個閾值的數值會指定為範圍中的最後一個元素。

quantize.copy()

範例 · 原始碼 · 傳回此比例尺的精確副本。

js
const c1 = d3.scaleQuantize(d3.schemeBlues[5]);
const c2 = c1.copy();

對此比例尺的變更不會影響傳回的比例尺,反之亦然。