D3

颜色插值 ​

¥Color interpolation

用于各种颜色空间中颜色的插值器。

¥Interpolators for colors in various color spaces.

interpolateRgb(a, b) ​

js
d3.interpolateRgb("purple", "orange")

示例 · 源代码 · 返回一个介于 a 和 b 两种颜色之间的 RGB 颜色空间插值器，其 gamma 值可配置。如果未指定 gamma，则默认为 1.0。颜色 a 和 b 不必是 RGB 颜色；它们将使用 d3.rgb 转换为 RGB。插值器的返回值是一个 RGB 字符串。

¥Examples · Source · Returns an RGB color space interpolator between the two colors a and b with a configurable gamma. If the gamma is not specified, it defaults to 1.0. The colors a and b need not be in RGB; they will be converted to RGB using d3.rgb. The return value of the interpolator is an RGB string.

interpolateRgbBasis(colors) ​

js
d3.interpolateRgbBasis(["purple", "green", "orange"])

示例 · 源代码 · 通过指定的颜色数组返回一个均匀非有理 B 样条插值器，这些颜色数组将被转换为 RGB 颜色空间。隐式控制点的生成方式使得插值器在 t = 0 时返回 colors[0]，返回 colors[colors.length]。 - 1] 在 t = 1 时。目前不支持不透明度插值。另请参阅 d3.interpolateBasis，并参阅 d3-scale-chromatic 获取示例。

¥Examples · Source · Returns a uniform nonrational B-spline interpolator through the specified array of colors, which are converted to RGB color space. Implicit control points are generated such that the interpolator returns colors[0] at t = 0 and colors[colors.length - 1] at t = 1. Opacity interpolation is not currently supported. See also d3.interpolateBasis, and see d3-scale-chromatic for examples.

interpolateRgbBasisClosed(colors) ​

js
d3.interpolateRgbBasisClosed(["purple", "green", "orange"])

示例 · 源代码 · 通过指定的颜色数组返回一个均匀非有理 B 样条插值器，这些颜色数组将被转换为 RGB 颜色空间。控制点隐式重复，使得生成的样条曲线在 [0,1] 区间 t 附近重复时具有循环 C² 连续性；例如，这对于创建循环色阶很有用。目前不支持不透明度插值。另请参阅 d3.interpolateBasisClosed，并参阅 d3-scale-chromatic 获取示例。

¥Examples · Source · Returns a uniform nonrational B-spline interpolator through the specified array of colors, which are converted to RGB color space. The control points are implicitly repeated such that the resulting spline has cyclical C² continuity when repeated around t in [0,1]; this is useful, for example, to create cyclical color scales. Opacity interpolation is not currently supported. See also d3.interpolateBasisClosed, and see d3-scale-chromatic for examples.

interpolateHsl(a, b) ​

js
d3.interpolateHsl("purple", "orange")

示例 · 源代码 · 返回一个介于 a 和 b 两种颜色之间的 HSL 颜色空间插值器。颜色 a 和 b 不必是 HSL 颜色；它们将使用 d3.hsl 转换为 HSL。如果颜色的色相或饱和度为 NaN，则使用相反颜色的通道值。使用色调之间的最短路径。插值器的返回值是一个 RGB 字符串。

¥Examples · Source · Returns an HSL color space interpolator between the two colors a and b. The colors a and b need not be in HSL; they will be converted to HSL using d3.hsl. If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is an RGB string.

interpolateHslLong(a, b) ​

js
d3.interpolateHslLong("purple", "orange")

示例 · 源代码 · 与 interpolateHsl 类似，但不使用色调之间的最短路径。

¥Examples · Source · Like interpolateHsl, but does not use the shortest path between hues.

interpolateLab(a, b) ​

js
d3.interpolateLab("purple", "orange")

示例 · 源代码 · 返回一个介于 a 和 b 两种颜色之间的 CIELAB 颜色空间 插值器。颜色 a 和 b 不必是 CIELAB 颜色；它们将使用 d3.lab 转换为 CIELAB。插值器的返回值是一个 RGB 字符串。

¥Examples · Source · Returns a CIELAB color space interpolator between the two colors a and b. The colors a and b need not be in CIELAB; they will be converted to CIELAB using d3.lab. The return value of the interpolator is an RGB string.

interpolateHcl(a, b) ​

js
d3.interpolateHcl("purple", "orange")

示例 · 源代码 · 返回一个介于 a 和 b 两种颜色之间的 CIELChab 颜色空间 插值器。颜色 a 和 b 不必是 CIELChab 颜色；它们将使用 d3.hcl 转换为 CIELChab。如果颜色的色相或色度为 NaN，则使用相反颜色的通道值。使用色调之间的最短路径。插值器的返回值是一个 RGB 字符串。

¥Examples · Source · Returns a CIELChab color space interpolator between the two colors a and b. The colors a and b need not be in CIELChab; they will be converted to CIELChab using d3.hcl. If either color’s hue or chroma is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is an RGB string.

interpolateHclLong(a, b) ​

js
d3.interpolateHclLong("purple", "orange")

示例 · 源代码 · 与 interpolateHcl 类似，但不使用色调之间的最短路径。

¥Examples · Source · Like interpolateHcl, but does not use the shortest path between hues.

interpolateCubehelix(a, b) ​

js
d3.interpolateCubehelix("purple", "orange")
js
d3.interpolateCubehelix.gamma(3)("purple", "orange")

示例 · 源代码 · 使用可配置的 gamma 返回两个颜色 a 和 b 之间的 Cubehelix 颜色空间插值器。如果未指定 gamma，则默认为 1.0。颜色 a 和 b 不必是 Cubehelix 颜色；它们将使用 d3.cubehelix 转换为 Cubehelix。如果颜色的色相或饱和度为 NaN，则使用相反颜色的通道值。使用色调之间的最短路径。插值器的返回值是一个 RGB 字符串。

¥Examples · Source · Returns a Cubehelix color space interpolator between the two colors a and b using a configurable gamma. If the gamma is not specified, it defaults to 1.0. The colors a and b need not be in Cubehelix; they will be converted to Cubehelix using d3.cubehelix. If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is an RGB string.

interpolateCubehelixLong(a, b) ​

js
d3.interpolateCubehelixLong("purple", "orange")
js
d3.interpolateCubehelixLong.gamma(3)("purple", "orange")

示例 · 源代码 · 与 interpolateCubehelix 类似，但不使用色调之间的最短路径。

¥Examples · Source · Like interpolateCubehelix, but does not use the shortest path between hues.

interpolateColor.gamma(gamma) {#interpolateColor_gamma} ​

js
d3.interpolateRgb.gamma(2.2)("purple", "orange")

假设 interpolate 是 interpolateRgb、interpolateCubehelix 或 interpolateCubehelixLong 之一，则使用指定的 gamma 返回一个同类型的新插值器工厂。有关伽马校正的更多信息，请参阅 Eric Brasseur 的文章 图片缩放中的 Gamma 误差。

¥Given that interpolate is one of interpolateRgb, interpolateCubehelix or interpolateCubehelixLong, returns a new interpolator factory of the same type using the specified gamma. See Eric Brasseur’s article, Gamma error in picture scaling, for more on gamma correction.

interpolateHue(a, b) ​

js
d3.interpolateHue(20, 340)(0.5) // 0

示例 · 源代码 · 返回两个色相角度 a 和 b 之间的插值器。如果色相为 NaN，则使用相反值。使用色调之间的最短路径。插值器的返回值是 [0, 360) 之间的数字。

¥Examples · Source · Returns an interpolator between the two hue angles a and b. If either hue is NaN, the opposing value is used. The shortest path between hues is used. The return value of the interpolator is a number in [0, 360).

标准插值器从 t = 0 时的起始值 a 混合到 t = 1 时的终止值 b，而样条插值器使用分段多项式函数平滑地混合 [0,1] 范围内的多个输入值。目前仅支持三次均匀非有理 B 样条曲线，也称为基样条函数。

¥Whereas standard interpolators blend from a starting value a at t = 0 to an ending value b at t = 1, spline interpolators smoothly blend multiple input values for t in [0,1] using piecewise polynomial functions. Only cubic uniform nonrational B-splines are currently supported, also known as basis splines.