Skip to content

顺序尺度

¥Sequential scales

顺序比例与 线性比例尺 类似,因为它们将连续的数字输入域映射到连续的输出范围。Unlike linear scales, the input domain and output range of a sequential scale always have exactly two elements, and the output range is typically specified as an interpolator rather than an array of values.顺序缩放通常用于颜色编码;另见 d3-scale-chromatic。这些比例尺不公开 invertinterpolate 方法。顺序缩放比例还有 logpowsymlogquantile 变体。

¥Sequential scales are similar to linear scales in that they map a continuous, numeric input domain to a continuous output range. Unlike linear scales, the input domain and output range of a sequential scale always have exactly two elements, and the output range is typically specified as an interpolator rather than an array of values. Sequential scales are typically used for a color encoding; see also d3-scale-chromatic. These scales do not expose invert and interpolate methods. There are also log, pow, symlog, and quantile variants of sequential scales.

scaleSequential(domain, interpolator)

示例 · 源代码 · 使用指定的域和 interpolator 函数或数组构造一个新的顺序比例尺。

¥Examples · Source · Constructs a new sequential scale with the specified domain and interpolator function or array.

js
const color = d3.scaleSequential([0, 100], d3.interpolateBlues);

如果未指定域,则默认为 [0, 1]。

¥If domain is not specified, it defaults to [0, 1].

js
const color = d3.scaleSequential(d3.interpolateBlues);

如果未指定 interpolator,则默认为恒等函数。

¥If interpolator is not specified, it defaults to the identity function.

js
const identity = d3.scaleSequential();

应用比例时,将使用通常在 [0, 1] 范围内的值调用插值器,其中 0 表示最小值,1 表示最大值。例如,实现不明智的愤怒彩虹量表(请使用 interpolateRainbow 代替):

¥When the scale is applied, the interpolator will be invoked with a value typically in the range [0, 1], where 0 represents the minimum value and 1 represents the maximum value. For example, to implement the ill-advised angry rainbow scale (please use interpolateRainbow instead):

js
const rainbow = d3.scaleSequential((t) => d3.hsl(t * 360, 1, 0.5) + "");

如果 interpolator 是一个数组,它表示比例尺的二元输出范围,并使用 interpolate 转换为插值函数。

¥If interpolator is an array, it represents the scale’s two-element output range and is converted to an interpolator function using interpolate.

js
const color = d3.scaleSequential(["red", "blue"]);

顺序比例尺的域必须是数字,并且必须恰好包含两个值。

¥A sequential scale’s domain must be numeric and must contain exactly two values.

sequential.interpolator(interpolator) {#sequential_interpolator}

如果指定了 interpolator,则将比例尺的插值器设置为指定的函数。

¥If interpolator is specified, sets the scale’s interpolator to the specified function.

js
const color = d3.scaleSequential().interpolator(d3.interpolateBlues);

如果未指定 interpolator,则返回比例尺的当前插值器。

¥If interpolator is not specified, returns the scale’s current interpolator.

js
color.interpolator() // d3.interpolateBlues

sequential.range(range) {#sequential_range}

请参阅 linear.range。如果指定了 range,则给定的二元素数组将使用 interpolate 转换为插值器函数。

¥See linear.range. If range is specified, the given two-element array is converted to an interpolator function using interpolate.

js
const color = d3.scaleSequential().range(["red", "blue"]);

以上内容等同于:

¥The above is equivalent to:

js
const color = d3.scaleSequential(d3.interpolate("red", "blue"));

sequential.rangeRound(range) {#sequential_rangeRound}

请参阅 linear.rangeRound。如果指定了 range,则隐式使用 interpolateRound 作为插值器。

¥See linear.rangeRound. If range is specified, implicitly uses interpolateRound as the interpolator.

scaleSequentialLog(domain, range)

返回一个具有对数变换的新顺序缩放比例,类似于 对数比例尺

¥Returns a new sequential scale with a logarithmic transform, analogous to a log scale.

scaleSequentialPow(domain, range)

返回一个具有指数变换的新顺序缩放比例,类似于 功率标度

¥Returns a new sequential scale with an exponential transform, analogous to a power scale.

scaleSequentialSqrt(domain, range)

返回一个具有平方根变换的新顺序缩放比例,类似于 平方比例尺

¥Returns a new sequential scale with a square-root transform, analogous to a sqrt scale.

scaleSequentialSymlog(domain, range)

返回一个具有对称对数变换的新顺序缩放比例,类似于 符号对数尺度

¥Returns a new sequential scale with a symmetric logarithmic transform, analogous to a symlog scale.

scaleSequentialQuantile(domain, range)

源代码 · 返回一个带有 p 分位数变换的新序列比例,类似于 分位数比例

¥Source · Returns a new sequential scale with a p-quantile transform, analogous to a quantile scale.

sequentialQuantile.quantiles(n) {#sequentialQuantile_quantiles}

源代码 · 返回一个包含 n + 1 个分位数的数组。

¥Source · Returns an array of n + 1 quantiles.

js
const color = d3.scaleSequentialQuantile()
    .domain(penguins.map((d) => d.body_mass_g))
    .interpolator(d3.interpolateBlues);

color.quantiles(4); // [2700, 3550, 4050, 4750, 6300]

例如,如果 n = 4,则返回一个包含五个数字的数组:最小值、第一四分位数、中位数、第三四分位数和最大值。

¥For example, if n = 4, returns an array of five numbers: the minimum value, the first quartile, the median, the third quartile, and the maximum.