點標度
點標度是 頻段標度 的變體,其頻寬固定為零。點標度通常用於具有序數或分類維度的散佈圖。
scalePoint(domain, range)
範例 · 原始碼 · 建立一個新的點標度,具有指定的 domain 和 range,沒有 padding,沒有 rounding,且中心 alignment。如果未指定 domain,則預設為空網域。如果未指定 range,則預設為單位網域 [0, 1]。
point(value)
範例 · 原始碼 · 給定輸入 domain 中的 value,傳回從輸出 range 衍生的對應點。
const x = d3.scalePoint(["a", "b", "c"], [0, 960]);
x("a"); // 0
x("b"); // 480
x("c"); // 960
x("d"); // undefined
如果給定的 value 不在標度的網域中,則傳回 undefined。
point.domain(domain)
範例 · 原始碼 · 如果指定 domain,則將網域設定為指定的值陣列。
const x = d3.scalePoint([0, 960]).domain(["a", "b", "c", "d", "e", "f"]);
domain 中的第一個元素將對應到第一個點,第二個網域值對應到第二個點,以此類推。網域值會儲存在 InternMap 中,從原始值到索引;然後使用產生的索引來確定點。因此,點標度的值必須可以強制轉換為原始值,而原始網域值唯一識別對應的點。如果未指定 domain,則此方法會傳回目前的網域。
point.range(range)
範例 · 原始碼 · 如果指定 range,將比例尺的範圍設定為指定的兩個數字元素陣列,並傳回此比例尺。
const x = d3.scalePoint().range([0, 960]);
如果給定陣列中的元素不是數字,它們將被強制轉換為數字。如果未指定 range,則傳回比例尺目前的範圍,其預設值為 [0, 1]。
point.rangeRound(range)
範例 · 原始碼 · 將比例尺的 range 設定為指定的兩個數字元素陣列,同時啟用 四捨五入;傳回此比例尺。
const x = d3.scalePoint().rangeRound([0, 960]);
這是一個便利的方法,等同於
point.range(range).round(true)
四捨五入有時可避免反鋸齒失真,不過也請考慮 shape-rendering 的「crispEdges」樣式。
point.round(round)
範例 · 原始碼 · 如果指定 round,則依據設定啟用或停用四捨五入。
const x = d3.scalePoint(["a", "b", "c"], [0, 960]).round(false);
如果未指定 round,則傳回四捨五入是否已啟用。
x.round() // false
如果啟用四捨五入,每個點的位置將會是整數。四捨五入有時可避免反鋸齒失真,不過也請考慮 shape-rendering 的「crispEdges」樣式。請注意,如果網域的寬度不是範圍基數的倍數,即使沒有填塞,也可能會有剩餘的未使用空間!使用 point.align 來指定如何分配剩餘空間。
point.padding(padding)
範例 · 原始碼 · 如果指定 padding,將外部填塞設定為指定的數字,通常在 [0, 1] 範圍內。
const x = d3.scalePoint(["a", "b", "c"], [0, 960]).padding(0.1);
如果未指定 padding,則傳回目前的外部填充,其預設為 0。
x.padding() // 0.1
外部填充指定空白的數量,以 step 的倍數表示,用於預留第一個點之前和最後一個點之後的空間。等於 band.paddingOuter。
point.align(align)
範例 · 原始碼 · 如果指定 align,則將對齊設定為指定的值,該值必須在範圍 [0, 1] 內。
const x = d3.scalePoint(["a", "b", "c"], [0, 960]).align(0.5);
如果未指定 align,則傳回目前的對齊,其預設為 0.5。
x.align() // 0.5
對齊指定如何分配範圍中任何剩餘的未使用空間。值 0.5 表示剩餘的空間應在第一個點之前和最後一個點之後平均分配;即,點應置中在範圍內。值 0 或 1 可用於將點移到一側,例如將它們定位在軸旁邊。