值插值
¥Value interpolation
这些是最通用的插值器,适用于大多数值。
¥These are the most general interpolators, suitable for most values.
interpolate(a, b)
示例 · 源代码 · 返回两个任意值 a 和 b 之间的插值器。
¥Examples · Source · Returns an interpolator between the two arbitrary values a and b.
d3.interpolate("red", "blue")(0.5) // "rgb(128, 0, 128)"
插值器的实现基于最终值 b 的类型,使用以下算法:
¥The interpolator implementation is based on the type of the end value b, using the following algorithm:
如果 b 为 null、undefined 或布尔值,则使用常量 b。
¥If b is null, undefined or a boolean, use the constant b.
如果 b 是数字,则使用 interpolateNumber。
¥If b is a number, use interpolateNumber.
如果 b 是 color 或可强制转换为颜色的字符串,则使用 interpolateRgb。
¥If b is a color or a string coercible to a color, use interpolateRgb.
如果 b 是 date,则使用 interpolateDate。
¥If b is a date, use interpolateDate.
如果 b 是字符串,则使用 interpolateString。
¥If b is a string, use interpolateString.
如果 b 是数字类型的 类型数组,则使用 interpolateNumberArray。
¥If b is a typed array of numbers, use interpolateNumberArray.
如果 b 是通用 array,则使用 interpolateArray。
¥If b is a generic array, use interpolateArray.
如果 b 可以强制转换为数字,则使用 interpolateNumber。
¥If b is coercible to a number, use interpolateNumber.
¥Use interpolateObject.
根据所选的插值器,将 a 强制转换为合适的对应类型。
¥Based on the chosen interpolator, a is coerced to the suitable corresponding type.
interpolateNumber(a, b)
示例 · 源代码 · 返回两个数字 a 和 b 之间的插值器。
¥Examples · Source · Returns an interpolator between the two numbers a and b.
d3.interpolateNumber(20, 620)(0.8) // 500
返回的插值器等同于:
¥The returned interpolator is equivalent to:
function interpolator(t) {
return a * (1 - t) + b * t;
}
CAUTION
使用插值器生成字符串时,避免在零值之间进行插值。当非常小的值被字符串化时,它们可能会被转换为科学计数法,这在旧版浏览器中是无效的属性或样式属性值。例如,数字 0.0000001
转换为字符串 "1e-7"
。这在插入不透明度时尤其明显。为避免使用科学计数法,请将过渡的起始或结束位置设为 1e-6:未以科学计数法字符串化的最小值。
¥Avoid interpolating to or from the number zero when the interpolator is used to generate a string. When very small values are stringified, they may be converted to scientific notation, which is an invalid attribute or style property value in older browsers. For example, the number 0.0000001
is converted to the string "1e-7"
. This is particularly noticeable with interpolating opacity. To avoid scientific notation, start or end the transition at 1e-6: the smallest value that is not stringified in scientific notation.
interpolateRound(a, b)
示例 · 源代码 · 返回两个数字 a 和 b 之间的插值器。
¥Examples · Source · Returns an interpolator between the two numbers a and b.
d3.interpolateRound(20, 620)(0.821) // 513
插值器与 interpolateNumber 类似,不同之处在于它会将结果值四舍五入为最接近的整数。
¥The interpolator is similar to interpolateNumber except it will round the resulting value to the nearest integer.
interpolateString(a, b)
示例 · 源代码 · 返回两个字符串 a 和 b 之间的插值器。
¥Examples · Source · Returns an interpolator between the two strings a and b.
d3.interpolateString("20px", "32px")(0.5) // "26px"
字符串插值器查找嵌入在 a 和 b 中的数字,其中每个数字都是 JavaScript 可以理解的形式。以下是一些将在字符串中检测到的数字示例:-1
、42
、3.14159
和 6.0221413e+23
。
¥The string interpolator finds numbers embedded in a and b, where each number is of the form understood by JavaScript. A few examples of numbers that will be detected within a string: -1
, 42
, 3.14159
, and 6.0221413e+23
.
对于 b 中嵌入的每个数字,插值器将尝试在 a 中找到对应的数字。如果找到相应的数字,则使用 interpolateNumber 创建一个数字插值器。字符串 b 的其余部分用作模板:字符串 b 的静态部分在插值过程中保持不变,插值后的数值嵌入模板中。
¥For each number embedded in b, the interpolator will attempt to find a corresponding number in a. If a corresponding number is found, a numeric interpolator is created using interpolateNumber. The remaining parts of the string b are used as a template: the static parts of the string b remain constant for the interpolation, with the interpolated numeric values embedded in the template.
例如,如果 a 是 "300 12px sans-serif"
,b 是 "500 36px Comic-Sans"
,则找到两个嵌入的数字。(字符串 b 的)其余静态部分是两个数字 (" "
) 之间的空格和后缀 ("px Comic-Sans"
)。插值器在 t = 0.5 时的结果为 "400 24px Comic-Sans"
。
¥For example, if a is "300 12px sans-serif"
, and b is "500 36px Comic-Sans"
, two embedded numbers are found. The remaining static parts (of string b) are a space between the two numbers (" "
), and the suffix ("px Comic-Sans"
). The result of the interpolator at t = 0.5 is "400 24px Comic-Sans"
.
interpolateDate(a, b)
示例 · 源代码 · 返回两个 dates a 和 b 之间的插值器。
¥Examples · Source · Returns an interpolator between the two dates a and b.
d3.interpolateDate(new Date("2014-01-01"), new Date("2024-01-01"))(0.5) // 2019-01-01
CAUTION
不创建返回日期的防御性复制;每次执行插值器时都会返回相同的 Date 实例。由于插值器通常是 动画过渡 内部循环的一部分,因此出于性能考虑,不进行任何复制。
¥No defensive copy of the returned date is created; the same Date instance is returned for every evaluation of the interpolator. No copy is made for performance reasons, as interpolators are often part of the inner loop of animated transitions.
interpolateArray(a, b)
示例 · 源代码 · 返回两个数组 a 和 b 之间的插值器。
¥Examples · Source · Returns an interpolator between the two arrays a and b.
d3.interpolateArray([0, 0, 0], [1, 2, 3])(0.5) // [0.5, 1, 1.5]
如果 b 是类型数组(例如 Float64Array),则改为调用 interpolateNumberArray。
¥If b is a typed array (e.g., Float64Array), interpolateNumberArray is called instead.
在内部,创建一个与 b 长度相同的数组模板。对于 b 中的每个元素,如果 a 中存在对应的元素,则使用 interpolate 为这两个元素创建一个通用插值器。如果没有这样的元素,则在模板中使用 b 中的静态值。然后,对于给定的参数 t,将评估模板的嵌入插值器。然后返回更新后的数组模板。
¥Internally, an array template is created that is the same length as b. For each element in b, if there exists a corresponding element in a, a generic interpolator is created for the two elements using interpolate. If there is no such element, the static value from b is used in the template. Then, for the given parameter t, the template’s embedded interpolators are evaluated. The updated array template is then returned.
例如,如果 a 是数组 [0, 1]
,b 是数组 [1, 10, 100]
,则 t = 0.5 的插值器的结果为数组 [0.5, 5.5, 100]
。
¥For example, if a is the array [0, 1]
and b is the array [1, 10, 100]
, then the result of the interpolator for t = 0.5 is the array [0.5, 5.5, 100]
.
CAUTION
不创建模板数组的防御性复制;修改返回的数组可能会对插值器的后续计算产生不利影响。出于性能考虑,不进行任何复制;插值器通常是 动画过渡 内部循环的一部分。
¥No defensive copy of the template array is created; modifications of the returned array may adversely affect subsequent evaluation of the interpolator. No copy is made for performance reasons; interpolators are often part of the inner loop of animated transitions.
interpolateNumberArray(a, b)
示例 · 源代码 · 返回两个数字数组 a 和 b 之间的插值器。
¥Examples · Source · Returns an interpolator between the two arrays of numbers a and b.
d3.interpolateNumberArray([0, 1], Float64Array.of(1, 3))(0.5) // [0.5, 2]
在内部,创建一个与 b 类型和长度相同的数组模板。对于 b 中的每个元素,如果 a 中存在对应元素,则直接将值插值到数组模板中。如果没有这样的元素,则复制 b 中的静态值。然后返回更新后的数组模板。
¥Internally, an array template is created that is the same type and length as b. For each element in b, if there exists a corresponding element in a, the values are directly interpolated in the array template. If there is no such element, the static value from b is copied. The updated array template is then returned.
CAUTION
不进行模板数组以及参数 a 和 b 的防御性复制;修改这些数组可能会影响插值器的后续计算。
¥No defensive copy is made of the template array and the arguments a and b; modifications of these arrays may affect subsequent evaluation of the interpolator.
interpolateObject(a, b)
示例 · 源代码 · 返回两个对象 a 和 b 之间的插值器。
¥Examples · Source · Returns an interpolator between the two objects a and b.
d3.interpolateObject({x: 0, y: 1}, {x: 1, y: 10, z: 100})(0.5) // {x: 0.5, y: 5.5, z: 100}
在内部,创建一个具有与 b 相同属性的对象模板。对于 b 中的每个属性,如果 a 中存在对应的属性,则使用 interpolate 为这两个元素创建一个通用插值器。如果没有这样的属性,则在模板中使用 b 中的静态值。然后,对于给定的参数 t,将评估模板的嵌入插值器,并返回更新后的对象模板。
¥Internally, an object template is created that has the same properties as b. For each property in b, if there exists a corresponding property in a, a generic interpolator is created for the two elements using interpolate. If there is no such property, the static value from b is used in the template. Then, for the given parameter t, the template's embedded interpolators are evaluated and the updated object template is then returned.
例如,如果 a 是对象 {x: 0, y: 1}
,b 是对象 {x: 1, y: 10, z: 100}
,则 t = 0.5 的插值器的结果为对象 {x: 0.5, y: 5.5, z: 100}
。
¥For example, if a is the object {x: 0, y: 1}
and b is the object {x: 1, y: 10, z: 100}
, the result of the interpolator for t = 0.5 is the object {x: 0.5, y: 5.5, z: 100}
.
对象插值对于数据空间插值尤其有用,因为插值的对象是数据而不是属性值。例如,你可以插入一个描述饼图中圆弧的对象,然后使用 arc 计算新的 SVG 路径数据。
¥Object interpolation is particularly useful for dataspace interpolation, where data is interpolated rather than attribute values. For example, you can interpolate an object which describes an arc in a pie chart, and then use arc to compute the new SVG path data.
CAUTION
不创建模板对象的防御性复制;修改返回的对象可能会对插值器的后续计算产生不利影响。出于性能考虑,不进行任何复制;插值器通常是 动画过渡 内部循环的一部分。
¥No defensive copy of the template object is created; modifications of the returned object may adversely affect subsequent evaluation of the interpolator. No copy is made for performance reasons; interpolators are often part of the inner loop of animated transitions.
interpolateBasis(values)
示例 · 源代码 · 通过指定的值数组返回一个均匀非有理 B 样条插值器,值必须是数字。
¥Examples · Source · Returns a uniform nonrational B-spline interpolator through the specified array of values, which must be numbers.
d3.interpolateBasis([0, 0.1, 0.4, 1])(0.5) // 0.2604166666666667
隐式控制点的生成方式使得插值器在 t = 0 时返回 values[0],返回 values[values.length]。 - 1] 在 t = 1 时。另请参阅 curveBasis 和 interpolateRgbBasis。
¥Implicit control points are generated such that the interpolator returns values[0] at t = 0 and values[values.length - 1] at t = 1. See also curveBasis and interpolateRgbBasis.
interpolateBasisClosed(values)
示例 · 源代码 · 通过指定的值数组返回一个均匀非有理 B 样条插值器,值必须是数字。
¥Examples · Source · Returns a uniform nonrational B-spline interpolator through the specified array of values, which must be numbers.
d3.interpolateBasisClosed([0, 0.1, 0.4, 1])(0.5) // 0.45
控制点隐式重复,使得生成的一维样条曲线在 [0,1] 区间 t 附近重复时具有循环 C² 连续性。另请参阅 curveBasisClosed 和 interpolateRgbBasisClosed。
¥The control points are implicitly repeated such that the resulting one-dimensional spline has cyclical C² continuity when repeated around t in [0,1]. See also curveBasisClosed and interpolateRgbBasisClosed.
interpolateDiscrete(values)
¥Examples · Source · Returns a discrete interpolator for the given array of values.
d3.interpolateDiscrete(["red", "blue", "green"])(0.5) // "blue"
返回的插值器将 [0, 1 / n) 范围内的 t 映射到 values[0],将 [1 / n, 2 / n) 范围内的 t 映射到 values[1],以此类推,其中 n = values.length。实际上,这是一个轻量级的 量化比例,其范围固定为 [0, 1]。
¥The returned interpolator maps t in [0, 1 / n) to values[0], t in [1 / n, 2 / n) to values[1], and so on, where n = values.length. In effect, this is a lightweight quantize scale with a fixed domain of [0, 1].
quantize(interpolator, n)
示例 · 源代码 · 从指定的插值器中返回 n 个均匀分布的样本,其中 n 是大于 1 的整数。
¥Examples · Source · Returns n uniformly-spaced samples from the specified interpolator, where n is an integer greater than one.
d3.quantize(d3.interpolate("red", "blue"), 4) // ["rgb(255, 0, 0)", "rgb(170, 0, 85)", "rgb(85, 0, 170)", "rgb(0, 0, 255)"]
第一个采样始终在 t = 0 处,最后一个采样始终在 t = 1 处。这可用于从给定插值器生成固定数量的样本,例如从 连续插值器 导出 量化比例 的范围。
¥The first sample is always at t = 0, and the last sample is always at t = 1. This can be useful in generating a fixed number of samples from a given interpolator, such as to derive the range of a quantize scale from a continuous interpolator.
CAUTION
此方法不适用于不返回其输出防御性副本的插值器,例如 interpolateArray、interpolateDate 和 interpolateObject。对于这些插值器,你必须封装插值器并为每个返回值创建一个副本。
¥This method will not work with interpolators that do not return defensive copies of their output, such as interpolateArray, interpolateDate and interpolateObject. For those interpolators, you must wrap the interpolator and create a copy for each returned value.
piecewise(interpolate, values)
示例 · 源代码 · 返回一个分段插值器,为每对相邻的值组合插值器。
¥Examples · Source · Returns a piecewise interpolator, composing interpolators for each adjacent pair of values.
d3.piecewise(d3.interpolateRgb.gamma(2.2), ["red", "green", "blue"])
如果未指定 interpolate,则默认为 interpolate。
¥If interpolate is not specified, defaults to interpolate.
d3.piecewise(["red", "green", "blue"])
返回的插值器将 [0, 1 / (n - 1)] 中的 t 映射到 interpolate(values[0], values[1]),将 [1 / (n - 1), 2 / (n - 1)] 进行 interpolate(values[1], values[2]),依此类推,其中 n = values.length。实际上,这是一个轻量级的 线性比例尺。
¥The returned interpolator maps t in [0, 1 / (n - 1)] to interpolate(values[0], values[1]), t in [1 / (n - 1), 2 / (n - 1)] to interpolate(values[1], values[2]), and so on, where n = values.length. In effect, this is a lightweight linear scale.