Skip to content

线性尺度

🌐 Linear scales

线性刻度使用线性变换(平移和缩放)将连续的定量输入映射到连续的输出范围。如果范围也是数值型,则映射可能是反向的。对于连续的定量数据,线性刻度是一个很好的默认选择,因为它们保留了比例差异。每个范围值y可以表示为域值x的函数:y = mx + b

🌐 Linear scales map a continuous, quantitative input domain to a continuous output range using a linear transformation (translate and scale). If the range is also numeric, the mapping may be inverted. Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y can be expressed as a function of the domain value x: y = mx + b.

scaleLinear(domain, range)

示例 · 来源 · 使用指定的定义域值域默认插值器并禁用钳制构建一个新的线性比例尺。

js
d3.scaleLinear([0, 100], ["red", "blue"])

如果只指定了一个参数,则将其解释为范围。如果未指定范围中的任何一个,则每个默认值为 [0, 1]。

🌐 If a single argument is specified, it is interpreted as the range. If either domain or range are not specified, each defaults to [0, 1].

js
d3.scaleLinear(["red", "blue"]) // default domain of [0, 1]

线性()

🌐 linear(value)

示例 · 来源 · 给定来自定义域,返回来自值域的对应值。例如,要应用位置编码:

js
const x = d3.scaleLinear([10, 130], [0, 960]);
x(20); // 80
x(50); // 320

要应用颜色编码:

🌐 To apply a color encoding:

js
const color = d3.scaleLinear([10, 100], ["brown", "steelblue"]);
color(20); // "rgb(154, 52, 57)"
color(50); // "rgb(123, 81, 103)"

如果给定的超出范围,并且未启用限制,则映射将被外推,使返回值超出范围。

🌐 If the given value is outside the domain, and clamping is not enabled, the mapping will be extrapolated such that the returned value is outside the range.

linear.invert(value)

示例 · 来源 · 给定来自范围,返回来自的对应值。反转对于交互很有用,比如确定与鼠标位置对应的数据值。例如,要反转一个位置编码:

js
const x = d3.scaleLinear([10, 130], [0, 960]);
x.invert(80); // 20
x.invert(320); // 50

如果给定的超出范围,并且未启用夹紧,映射可能会被外推,从而返回的值超出域。仅当范围为数值时支持此方法。如果范围不是数值,则返回 NaN。

🌐 If the given value is outside the range, and clamping is not enabled, the mapping may be extrapolated such that the returned value is outside the domain. This method is only supported if the range is numeric. If the range is not numeric, returns NaN.

对于范围内的有效值 ylinear(linear.invert(y)) 约等于 y;同样地,对于定义域内的有效值 xlinear.invert(linear(x)) 约等于 x。由于浮点精度的限制,刻度及其反函数可能不完全精确。

linear.domain(domain)

示例 · 来源 · 如果指定了domain,则将刻度的域设置为指定的数字数组并返回此刻度。

js
const x = d3.scaleLinear().domain([10, 130]);

数组必须包含两个或更多元素。如果给定数组中的元素不是数字,它们将被强制转换为数字。

🌐 The array must contain two or more elements. If the elements in the given array are not numbers, they will be coerced to numbers.

虽然连续刻度在其定义域和值域中通常各有两个值,但指定两个以上的值会产生分段刻度。例如,要创建一个发散色彩刻度,用于在负值时在白色和红色之间插值,在正值时在白色和绿色之间插值,可以这样说:

🌐 Although continuous scales typically have two values each in their domain and range, specifying more than two values produces a piecewise scale. For example, to create a diverging color scale that interpolates between white and red for negative values, and white and green for positive values, say:

js
const color = d3.scaleLinear([-1, 0, 1], ["red", "white", "green"]);
color(-0.5); // "rgb(255, 128, 128)"
color(+0.5); // "rgb(128, 192, 128)"

在内部,分段刻度会对对应于给定域值的范围插值器执行二分查找。因此,域必须按升序或降序排列。如果域和范围的长度分别为NM,则只会观察每个的前*min(N,M)*个元素。

🌐 Internally, a piecewise scale performs a binary search for the range interpolator corresponding to the given domain value. Thus, the domain must be in ascending or descending order. If the domain and range have different lengths N and M, only the first min(N,M) elements in each are observed.

如果未指定 domain,则返回刻度当前域的副本。

🌐 If domain is not specified, returns a copy of the scale’s current domain.

js
color.domain() // [-1, 0, 1]

线性.range(range)

🌐 linear.range(range)

示例 · 来源 · 如果指定了range,则将刻度的范围设置为指定的值数组并返回此刻度。

js
const x = d3.scaleLinear().range([0, 960]);

数组必须包含两个或更多元素。与domain不同,给定数组中的元素不必是数字;任何底层interpolator支持的值都可以使用,但请注意,invert需要数值范围。

🌐 The array must contain two or more elements. Unlike the domain, elements in the given array need not be numbers; any value that is supported by the underlying interpolator will work, though note that numeric ranges are required for invert.

如果未指定 range,则返回刻度当前范围的副本。

🌐 If range is not specified, returns a copy of the scale’s current range.

js
x.range() // [0, 960]

有关更多示例,请参见 linear.interpolate

🌐 See linear.interpolate for more examples.

linear.rangeRound(range)

示例 · 来源 · 将量表的范围设置为指定的数值数组,同时将量表的插值器设置为interpolateRound;返回此量表。

js
const x = d3.scaleLinear().rangeRound([0, 960]);

这是一个便捷的方法,相当于:

🌐 This is a convenience method equivalent to:

js
linear.range(range).interpolate(d3.interpolateRound)

四舍五入插值器有时在避免锯齿伪影方面很有用,虽然也可以考虑使用 shape-rendering 的“crispEdges”样式。请注意,该插值器只能用于数值范围。

🌐 The rounding interpolator is sometimes useful for avoiding antialiasing artifacts, though also consider the shape-rendering “crispEdges” styles. Note that this interpolator can only be used with numeric ranges.

linear.clamp(clamp)

示例 · 来源 · 如果指定了clamp,则相应地启用或禁用夹紧;返回此缩放。

js
const x = d3.scaleLinear([0, 960]).clamp(true);

如果禁用夹紧(clamping)并且向比例(scale)传递了超出domain的值,该比例可能通过外推返回超出range的值。如果启用夹紧,比例的返回值始终在比例的范围内。夹紧同样适用于linear.invert。例如:

🌐 If clamping is disabled and the scale is passed a value outside the domain, the scale may return a value outside the range through extrapolation. If clamping is enabled, the return value of the scale is always within the scale’s range. Clamping similarly applies to linear.invert. For example:

js
const x = d3.scaleLinear([10, 130], [0, 960]); // clamping disabled by default
x(-10); // -160, outside range
x.invert(-160); // -10, outside domain
x.clamp(true); // enable clamping
x(-10); // 0, clamped to range
x.invert(-160); // 10, clamped to domain

如果未指定 clamp,则返回缩放当前是否将值限制在范围内。

🌐 If clamp is not specified, returns whether or not the scale currently clamps values to within the range.

js
x.clamp() // true, perhaps

linear.unknown(value)

示例 · 来源 · 如果指定了 value,则设置比例在未定义或 NaN 输入值时的输出值,并返回该比例。这对于指定缺失或无效数据的显示方式很有用。

js
const color = d3.scaleLinear([0, 100], ["red", "blue"]).unknown("#ccc");
color(NaN); // "#ccc"

如果未指定 value,则返回当前的未知值,默认为 undefined。

🌐 If value is not specified, returns the current unknown value, which defaults to undefined.

js
color.unknown() // "#ccc"

linear.interpolate(interpolate)

示例 · 来源 · 如果指定了interpolate,则设置比例的范围插值器工厂。

js
const color = d3.scaleLinear(["red", "blue"]).interpolate(d3.interpolateHcl);

比例尺的插值器工厂用于为范围中的每对相邻值创建插值器;这些插值器随后将归一化的域参数 t(在 [0, 1] 范围内)映射到范围中的对应值。如果未指定 factory,则返回比例尺当前的插值器工厂,默认为 d3.interpolate。有关更多插值器,请参见 d3-interpolate

🌐 The scale’s interpolator factory is used to create interpolators for each adjacent pair of values from the range; these interpolators then map a normalized domain parameter t in [0, 1] to the corresponding value in the range. If factory is not specified, returns the scale’s current interpolator factory, which defaults to d3.interpolate. See d3-interpolate for more interpolators.

例如,考虑一个范围内有三种颜色的发散色标:

🌐 For example, consider a diverging color scale with three colors in the range:

js
const color = d3.scaleLinear([-100, 0, +100], ["red", "white", "green"]);

Two interpolators are created internally by the scale, equivalent to:

js
const i0 = d3.interpolate("red", "white");
const i1 = d3.interpolate("white", "green");

指定自定义插值器的一个常见原因是更改插值的颜色空间。例如,使用 HCL

🌐 A common reason to specify a custom interpolator is to change the color space of interpolation. For example, to use HCL:

js
const color = d3.scaleLinear()
    .domain([10, 100])
    .range(["brown", "steelblue"])
    .interpolate(d3.interpolateHcl);

或者对于带有自定义伽马的 Cubehelix

🌐 Or for Cubehelix with a custom gamma:

js
const color = d3.scaleLinear()
    .domain([10, 100])
    .range(["brown", "steelblue"])
    .interpolate(d3.interpolateCubehelix.gamma(3));

小心

默认插值器 可能会重复使用返回值。例如,如果范围值是对象,那么值插值器总是返回同一个对象,并对其进行原地修改。如果比例尺用于设置属性或样式,这通常是可以接受的(并且为了性能也是可取的);然而,如果你需要存储比例尺的返回值,就必须指定你自己的插值器或根据需要进行复制。

linear.ticks(count)

示例 · 来源 · 从量表的中返回大约count个代表值。

js
const x = d3.scaleLinear([10, 100], ["red", "blue"]);
x.ticks(); // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

如果未指定 count,默认值为 10。返回的刻度值间距均匀,具有易于理解的值(例如 10 的倍数),并且保证在域的范围内。刻度通常用于显示参考线或刻度标记,配合可视化数据使用。指定的 count 仅作为提示;根据域的不同,标度可能返回更多或更少的值。另请参见 d3-array 的 ticks

🌐 If count is not specified, it defaults to 10. The returned tick values are uniformly spaced, have human-readable values (such as multiples of powers of 10), and are guaranteed to be within the extent of the domain. Ticks are often used to display reference lines, or tick marks, in conjunction with the visualized data. The specified count is only a hint; the scale may return more or fewer values depending on the domain. See also d3-array’s ticks.

linear.tickFormat(count, specifier)

示例 · 来源 · 返回一个适用于显示刻度值的 数字格式 函数,根据刻度值之间的固定间隔自动计算合适的精度。指定的 count 应该与用于生成 刻度值 的计数相同。

js
const x = d3.scaleLinear([0.1, 1], ["red", "blue"]);
const f = x.tickFormat();
f(0.1); // "0.1"
f(1); // "1.0"

一个可选的说明符允许使用自定义格式,其中格式的精度会根据刻度间隔自动由比例设置。例如,要格式化百分比变化,你可以这样说:

🌐 An optional specifier allows a custom format where the precision of the format is automatically set by the scale as appropriate for the tick interval. For example, to format percentage change, you might say:

js
const x = d3.scaleLinear([-1, 1], [0, 960]);
const T = x.ticks(5); // [-1, -0.5, 0, 0.5, 1]
const f = x.tickFormat(5, "+%");
T.map(f); // ["−100%", "−50%", "+0%", "+50%", "+100%"]

如果 specifier 使用格式类型 s,比例将根据域中的最大值返回 SI 前缀格式。如果 specifier 已经指定了精度,该方法等同于 locale.format

🌐 If specifier uses the format type s, the scale will return a SI-prefix format based on the largest value in the domain. If the specifier already specifies a precision, this method is equivalent to locale.format.

另请参见 d3.tickFormat

🌐 See also d3.tickFormat.

linear.nice(count)

示例 · 来源 · 扩展,使其以整齐的数值开始和结束。

js
const x = d3.scaleLinear([0.241079, 0.969679], [0, 960]).nice();
x.domain(); // [0.2, 1]

这种方法通常会修改比例的域,并且可能只将边界扩展到最接近的整值。如果域是从数据计算得出的,例如使用 extent,并且可能是不规则的,则使用 nicing 是有用的。如果域有两个以上的值,nicing 域只会影响第一个和最后一个值。

🌐 This method typically modifies the scale’s domain, and may only extend the bounds to the nearest round value. Nicing is useful if the domain is computed from data, say using extent, and may be irregular. If the domain has more than two values, nicing the domain only affects the first and last value.

一个可选的刻度 count 参数允许对用于扩展边界的步长有更大的控制,保证返回的 刻度 将完全覆盖该范围。

🌐 An optional tick count argument allows greater control over the step size used to extend the bounds, guaranteeing that the returned ticks will exactly cover the domain.

js
const x = d3.scaleLinear([0.241079, 0.969679], [0, 960]).nice(40);
x.domain(); // [0.24, 0.98]

调整刻度只是修改当前的范围;它不会自动调整随后使用 linear.domain 设置的范围。如果需要,在设置新范围后必须重新调整刻度。

🌐 Nicing a scale only modifies the current domain; it does not automatically nice domains that are subsequently set using linear.domain. You must re-nice the scale after setting the new domain, if desired.

linear.copy()

示例 · 来源 · 返回此刻度的精确副本。

js
const x1 = d3.scaleLinear([0, 100], ["red", "blue"]);
const x2 = x1.copy();

更改此比例不会影响返回的比例,反之亦然。

🌐 Changes to this scale will not affect the returned scale, and vice versa.

tickFormat(start, stop, count, specifier)

示例 · 来源 · 返回一个适合显示刻度值的 数字格式 函数,根据刻度值之间的固定间隔自动计算合适的精度,该间隔由 d3.tickStep 确定。

js
const f = d3.tickFormat(0, 1, 20);
f(1); // "1.00"

一个可选的说明符允许使用自定义格式,其中格式的精度会根据刻度间隔自动由比例设置。例如,要格式化百分比变化,你可以这样说:

🌐 An optional specifier allows a custom format where the precision of the format is automatically set by the scale as appropriate for the tick interval. For example, to format percentage change, you might say:

js
const f = d3.tickFormat(-1, 1, 5, "+%");
f(-0.5); // "-50%"

如果 specifier 使用格式类型 s,比例将根据 startstop 的较大绝对值返回一个 SI 前缀格式。如果 specifier 已经指定了精度,则此方法等同于 locale.format

🌐 If specifier uses the format type s, the scale will return a SI-prefix format based on the larger absolute value of start and stop. If the specifier already specifies a precision, this method is equivalent to locale.format.

scaleIdentity(range)

示例 · 来源 · 构建一个具有指定范围(以及扩展的)的新身份刻度。

js
const x = d3.scaleIdentity([0, 960]);

身份比例尺是线性比例尺的一个特殊情况,其定义域和值域完全相同;因此该比例尺及其反函数方法就是恒等函数。当处理像素坐标时,例如结合坐标轴使用时,身份比例尺有时会很有用。身份比例尺不支持rangeRoundclampinterpolate

🌐 Identity scales are a special case of linear scales where the domain and range are identical; the scale and its invert method are thus the identity function. These scales are occasionally useful when working with pixel coordinates, say in conjunction with an axis. Identity scales do not support rangeRound, clamp or interpolate.

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

🌐 If range is not specified, it defaults to [0, 1].

scaleRadial(domain, range)

示例 · 来源 · 使用指定的范围构建新的径向刻度。

js
const r = d3.scaleRadial([100, 200], [0, 480]);

径向刻度是线性刻度的一种变体,其范围在内部进行了平方处理,使得输入值与平方后的输出值线性对应。当你希望输入值对应图形标记的面积,而标记是由半径指定时(如径向条形图),这种刻度非常有用。径向刻度不支持插值

🌐 Radial scales are a variant of linear scales where the range is internally squared so that an input value corresponds linearly to the squared output value. These scales are useful when you want the input value to correspond to the area of a graphical mark and the mark is specified by radius, as in a radial bar chart. Radial scales do not support interpolate.

如果未指定 domainrange,每个默认值为 [0, 1]。

🌐 If domain or range is not specified, each defaults to [0, 1].