量化比例尺
量化比例尺類似於 線性比例尺,但它們使用離散而非連續的範圍。連續的輸入域會根據輸出範圍中的值數量(即,基數)劃分為均勻的區段。每個範圍值 y 可以表示為域值 x 的量化線性函數:y = m round(x) + b。請參閱 量化色塊圖 以取得範例。
scaleQuantize(domain, range)
範例 · 原始碼 · 建立一個新的量化比例尺,其具有指定的 domain 和 range。
js
const color = d3.scaleQuantize([0, 100], d3.schemeBlues[9]);
如果未指定 domain 或 range,則它們各自預設為 [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();
對此比例尺的變更不會影響傳回的比例尺,反之亦然。