跳至內容

刻度

從連續區間中產生具代表性的值。

ticks(start, stop, count)

範例 · 原始碼 · 傳回一個陣列,其中包含大約 count + 1 個均勻間隔、經過良好捨入的值,介於 startstop(包含)之間。每個值都是 1、2 或 5 乘以 10 的次方。

js
d3.ticks(1, 9, 5) // [2, 4, 6, 8]
js
d3.ticks(1, 9, 20) // [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9]

刻度具有包容性,表示它們可能包含指定的 startstop 值,如果(且僅當)它們是準確的、經過良好捨入的值,與推斷出的 step 一致。更正式地說,每個傳回的刻度 t 滿足 startttstop

tickIncrement(start, stop, count)

原始碼 · 類似於 d3.tickStep,但要求 start 始終小於或等於 stop,如果給定 startstopcount 的刻度步長小於 1,則傳回負的逆刻度步長。

js
d3.tickIncrement(1, 9, 5) // 2
js
d3.tickIncrement(1, 9, 20) // -2, meaning a tick step 0.5

此方法始終保證傳回一個整數,並由 d3.ticks 使用,以保證傳回的刻度值在 IEEE 754 浮點數中能以最精確的方式表示。

tickStep(start, stop, count)

原始碼 · 如果將相同的參數傳遞給 d3.ticks,則傳回相鄰刻度值之間的差值:一個經過良好捨入的數值,為 10 的次方乘以 1、2 或 5。

js
d3.tickStep(1, 9, 5) // 2

如果 stop 小於 start,可能會傳回負的刻度步長,以表示遞減的刻度。

js
d3.tickStep(9, 1, 5) // -2

請注意,由於 IEEE 754 浮點數的精確度有限,傳回的值可能不是精確的小數;請使用 d3-format 來格式化數字,以供人類閱讀。

nice(start, stop, count)

原始碼 · 傳回一個新的區間 [niceStart, niceStop],涵蓋指定的區間 [start, stop],其中保證 niceStartniceStop 會與對應的 刻度步長 對齊。

js
d3.nice(1, 9, 5) // [0, 10]

d3.tickIncrement 類似,這需要 start 小於或等於 stop

range(start, stop, step)

範例 · 原始碼 · 傳回一個包含算術級數的陣列,類似於 Python 內建的 range。此方法通常用於反覆運算均勻間隔的數字值序列,例如陣列的索引或線性比例的刻度。(另請參閱 d3.ticks 以取得經過良好捨入的值。)

js
d3.range(6) // [0, 1, 2, 3, 4, 5]

如果省略 step,則預設為 1。如果省略 start,則預設為 0。stop 值為不包含值;它不包含在結果中。如果 step 為正數,最後一個元素會是最大的 start + i * step,小於 stop;如果 step 為負數,最後一個元素會是最小的 start + i * step,大於 stop

js
d3.range(5, -1, -1) // [5, 4, 3, 2, 1, 0]

如果傳回的陣列會包含無限個值,則會傳回一個空的範圍。

js
d3.range(Infinity) // []

參數不需要是整數;但是,如果它們是整數,結果會更可預測。傳回陣列中的值定義為 start + i * step,其中 i 是從零到傳回陣列中元素總數減一之間的整數。

js
d3.range(0, 1, 0.2) // [0, 0.2, 0.4, 0.6000000000000001, 0.8]

這種行為是基於 IEEE 754 雙精度浮點數,其中定義 0.2 * 3 = 0.6000000000000001。請使用 d3-format 來格式化數字,以供人類閱讀,並進行適當的捨入;另請參閱 d3-scale 中的 linear.tickFormat。同樣地,如果傳回的陣列應該具有特定的長度,請考慮對整數範圍使用 array.map

js
d3.range(0, 1, 1 / 49) // 👎 returns 50 elements!
js
d3.range(49).map((d) => d / 49) // 👍 returns 49 elements