跳至内容

刻度

从连续区间生成代表性值。

ticks(start, stop, count)

示例 · 源代码 · 返回一个数组,该数组包含大约 count + 1 个在 startstop(包括)之间均匀分布、经过良好四舍五入的值。每个值都是十的幂乘以 1、2 或 5。

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 值。更正式地说,每个返回的刻度 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 传递相同的参数,则返回相邻刻度值之间的差值:一个经过良好四舍五入的值,它是十的幂乘以 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 为正,则最后一个元素是小于 stop 的最大 start + i * step;如果 step 为负,则最后一个元素是大于 stop 的最小 start + i * step

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

如果返回的数组将包含无限多个值,则返回一个空范围。

js
d3.range(Infinity) // []

参数不需要是整数;但是,如果它们是整数,结果将更加可预测。返回数组中的值定义为 start + i * step,其中 i 是从零到返回数组中的元素总数减 1 的整数。

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 格式化用于人类阅读的数字,并进行适当的舍入;另请参阅 linear.tickFormatd3-scale 中。同样,如果返回的数组应该具有特定的长度,请考虑对整数范围使用 array.map

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