D3.js 颜色插值完全指南d3-interpolate 中 interpolateRgb、HSL、Lab、HCL、Cubehelix 与 Hue 插值器详解【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3本文以 d3 v7 官方文档docs/d3-interpolate/color.md为核心系统讲解 d3-interpolate 模块提供的全部颜色插值器从基础的 RGB 双端插值、多色 B 样条插值到 HSL/CIELAB/CIELChab/Cubehelix 等感知色彩空间插值与 gamma 校正。读完后你能够为任意两种颜色构建平滑过渡函数、创建循环cyclical颜色比例尺、按需控制色相的最短/长路径并结合 ColorRamp 渲染组件 的思路在 Canvas 上可视化验证任意插值器的输出。1. 颜色插值器是什么d3-interpolate 是一组插值器工厂interpolator factory你传入起始与结束颜色它返回一个函数t ∈ [0, 1] → 颜色。这正是 d3 中所有颜色过渡的底层机制——比例尺d3-scale、过渡动画d3-transition、色板d3-scale-chromatic最终都依赖这些函数在两个或多个颜色之间取值。从仓库结构看src/index.js 中export * from d3-interpolate将本模块全部 API 汇入 d3 主命名空间因此d3.interpolateRgb等函数在引入整个 d3 包后直接可用本仓库 package.json 声明其依赖为d3-interpolate: ^3.0.1。所有双端插值器遵循统一约定参数a、b可以是任何 d3 可解析的颜色输入字符串、数字色、已解析的颜色对象返回的插值器在t 0处给出颜色a在t 1处给出颜色b返回值统一为RGB 颜色字符串如rgb(93, 98, 202)可直接用于 SVG/Canvas/CSS。下表汇总了docs/d3-interpolate/color.md中列出的全部颜色插值 API插值器色彩空间色相路径gamma 支持多色 B 样条变体interpolateRgbRGB—✔interpolateRgbBasis/interpolateRgbBasisClosedinterpolateHsl/interpolateHslLongHSL最短 / 长路径✘—interpolateLabCIELAB—✘—interpolateHcl/interpolateHclLongCIELChab最短 / 长路径✘—interpolateCubehelix/interpolateCubehelixLongCubehelix最短 / 长路径✔—interpolateHue色相角0–360最短路径✘—2. interpolateRgb(a, b)默认选择d3.interpolateRgb(purple, orange)在 RGB 色彩空间中对两个颜色做线性插值并支持可配置的 gamma缺省为 1.0。关键特性输入不限于 RGB。a和b可以是任何 d3 能解析的颜色如hsl(120, 50%, 40%)、十六进制、d3.hcl(...)对象内部会先经d3.rgb转换为 RGB 空间参见 d3-color 文档插值器返回 RGB 字符串。RGB 插值计算简单、速度快且interpolateRgb是d3.interpolate在两个可解析颜色之间的默认实现之一。缺点是在色相差异大时如紫到橙可能经过灰败的中段这正是下面各感知色彩空间插值器存在的意义。3. 多色 B 样条插值interpolateRgbBasis 与 interpolateRgbBasisClosed标准插值器只在两个端点之间混合spline 插值器则在t∈ [0,1] 上用分段多项式函数平滑地穿过多个输入值目前 d3 仅支持三次均匀非有理 B 样条cubic uniform nonrational B-spline即 basis spline。3.1 interpolateRgbBasis(colors)d3.interpolateRgbBasis([purple, green, orange])返回一个穿过给定颜色数组的均匀非有理 B 样条插值器颜色会被转换到 RGB 空间。其隐式控制点保证t 0时返回colors[0]t 1时返回colors[colors.length - 1]。注意透明度插值目前不受支持。该函数是通用版本 interpolateBasis 在颜色上的特化d3-scale-chromatic 文档 中有大量基于它构建连续色板的实例如d3.interpolateRdYlGn等顺序色板本质上都是interpolateRgbBasis对一组精心挑选颜色的封装。3.2 interpolateRgbBasisClosed(colors)d3.interpolateRgbBasisClosed([purple, green, orange])与interpolateRgbBasis的区别在于控制点会被隐式重复使样条在t绕 [0,1] 循环时具有C² 连续性——即t 1与t 0处颜色及其一阶、二阶变化率都平滑衔接。这正是构建循环颜色比例尺cyclical color scales如风向、相位、一天中的时刻的关键工具。透明度插值同样不受支持。其通用版本见 interpolateBasisClosed。4. 感知色彩空间插值HSL、Lab、HCLRGB 是设备空间人眼对其三个通道的变化并不敏感等权。下面三种插值器在感知均匀性更好的空间中进行过渡输出仍为 RGB 字符串。4.1 interpolateHsl(a, b) 与 interpolateHslLongd3.interpolateHsl(purple, orange) d3.interpolateHslLong(purple, orange)在 HSL 色彩空间插值。输入不限于 HSL会先经d3.hsl转换见 d3-color 文档。行为要点NaN 通道回填若某个颜色的色相hue或饱和度saturation为 NaN则取对方颜色对应通道的值最短色相路径interpolateHsl沿色相环上较短的一侧过渡interpolateHslLong与它相同但不使用最短路径——当两端色相需要绕远路经过互补色区域时例如从 350° 到 10° 经过红、黄而不是直接跨过 0° 缝隙使用 Long 变体。4.2 interpolateLab(a, b)d3.interpolateLab(purple, orange)在 CIELAB 色彩空间插值。CIELAB 设计目标是对人眼感知的均匀性L通道表示亮度a、b表示色度因此 Lab 插值通常在中间调上比 RGB 插值更鲜艳、更自然。输入会先经d3.lab转换见 d3-color 文档。4.3 interpolateHcl(a, b) 与 interpolateHclLongd3.interpolateHcl(purple, orange) d3.interpolateHclLong(purple, orange)在 CIELChabCIELAB 的柱状表示亮度 L、色度 C、色相 h空间插值。输入经d3.hcl转换见 d3-color 文档。NaN 处理与最短色相路径语义和 HSL 版本一致色相或色度为 NaN 时取对方通道值默认走最短路径Long 变体不走最短路径。4.4 如何选择需要精确控制沿色相环走哪一边选 HSL 或 HCL 及其 Long 变体追求中间颜色饱满、视觉均匀选 Lab 或 HCL与 CSS/通用工具链兼容性最高、性能优先选 RGB。5. Cubehelix 插值与 gamma 校正5.1 interpolateCubehelix / interpolateCubehelixLongd3.interpolateCubehelix(purple, orange) // 配置 gamma d3.interpolateCubehelix.gamma(3)(purple, orange)Cubehelix 是一个螺旋形的颜色空间沿色相旋转的同时亮度单调变化专为顺序数据sequential data设计能在单色系中同时表达色相变化 明暗层次。输入会先经d3.cubehelix转换见 d3-color 文档。与 HSL/HCL 相同NaN 通道取对方值、默认最短色相路径interpolateCubehelixLong为不走最短路径的版本d3.interpolateCubehelixLong(purple, orange) d3.interpolateCubehelixLong.gamma(3)(purple, orange)5.2 interpolateColor.gamma(gamma)d3.interpolateRgb.gamma(2.2)(purple, orange)gamma 机制是 d3 颜色插值中最容易被忽视、但影响最大的一个参数。屏幕显示的亮度与存储的像素值之间是 gamma 幂律关系典型值 2.2。若在 gamma 校正后的线性光空间直接插值中间颜色会比预期更暗或更亮d3 的做法是用pow(γ)将通道值映射到线性空间在线性空间中线性插值再用pow(1/γ)映射回显示空间。interpolateColor.gamma(γ)适用于三个插值器interpolateRgb、interpolateCubehelix 和 interpolateCubehelixLong。调用gamma(γ)不修改原插值器而是返回同类型、带指定 gamma 的新插值器工厂无副作用的柯里化风格。关于 gamma 校正的数学原理可参考文档引用的 Eric Brasseur 的 Gamma error in picture scaling 一文。缺省 gamma 为 1.0即不做校正的普通线性插值。6. interpolateHue(a, b)色相角插值d3.interpolateHue(20, 340)(0.5) // 0返回两个色相角之间的插值器输入是数字角度而非颜色若某个色相为 NaN取对方的值沿色相环最短路径过渡返回值是[0, 360)区间内的数字。上例中 20° 到 340° 的最短路径是向上跨过 0°20° → 0°(360°) → 340°故t 0.5时恰为 0。这个插值器常被嵌入自定义插值中用来单独控制色相通道例如保持亮度不变、只旋转色相也是理解 HSL/HCL/Cubehelix 内部色相处理逻辑的参照。7. 用 Canvas 验证插值器ColorRamp 的渲染思路官方文档中每个插值器下方都展示了一条由 组件绘制的渐变色带其源码在 docs/components/ColorRamp.vue。该组件是一个极小的通用插值器可视化器值得学习其实现function render(canvas, color, n) { canvas.width n; canvas.height 1; const context canvas.getContext(2d); for (let i 0; i n; i) { context.fillStyle color(i / (n - 1)); // 依次取 t 0, 1/(n-1), ..., 1 context.fillRect(i, 0, 1, 1); } }它把插值器当作t → 颜色的纯函数以n默认 256等距采样点铺满一条 1 像素高的画布模板部分用image-rendering: pixelated将画布拉伸显示使色带呈像素化条状便于肉眼检查插值是否平滑、循环版本在首尾是否连续组件接收colorFunction与nNumber两个 props任何t → 颜色的插值器都可以直接复用例如interpolateRgbBasisClosed([purple, green, orange])验证其首尾衔接。在你的项目里复刻这个模式只需 10 行 Canvas 代码即可对任意插值器做可视化回归检查。8. 与周边模块的协作d3-scale-chromatic全部顺序/发散/循环色板如d3.interpolateTurbo、d3.schemeTableau10系列都是在interpolateRgbBasis/interpolateRgbBasisClosed之上构建的理解本文的 B 样条小节即可读懂色板源码。参见 d3-scale-chromatic 文档。d3-color所有输入颜色不限于目标空间的自动转换依赖d3.rgb、d3.hsl、d3.lab、d3.hcl、d3.cubehelix五个解析/转换入口。参见 d3-color 文档。d3-transition过渡动画中颜色属性的默认插值即经由d3.interpolate分发到上述颜色插值器因此本文的 gamma、最短路径等语义同样作用于动画中间帧。通用插值器对照interpolateBasis/interpolateBasisClosed的数值版本语义与颜色版本一一对应见 d3-interpolate 数值插值文档。9. 实践要点小结双端平滑变色默认interpolateRgb中间色发灰时改用interpolateHsl/interpolateLab/interpolateHcl需要沿色相环走远路时选用*Long变体HSL、HCL、Cubehelix 均提供多颜色连续渐变用interpolateRgbBasis首尾要无缝循环方向图、时钟刻度用interpolateRgbBasisClosed对亮度一致性要求高的场景如科学可视化中相邻数据不应有明暗跳变为interpolateRgb或interpolateCubehelix配置gamma(2.2)透明度opacity目前未被 B 样条颜色插值器支持需要透明度过渡时应另行对 alpha 通道插值用 Canvas 等距采样ColorRamp 思路在实现后快速目检色带连续性是低成本高收益的验证手段。以上 API 以本仓库 d3 v7d3-interpolate ^3.0.1为准interpolateHue的输出范围[0, 360)、interpolateRgb缺省 gamma 1.0 等取值细节均可在 docs/d3-interpolate/color.md 原文中逐条核对。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
D3.js 颜色插值完全指南：d3-interpolate 中 interpolateRgb、HSL、Lab、HCL、Cubehelix 与 Hue 插值器详解
D3.js 颜色插值完全指南d3-interpolate 中 interpolateRgb、HSL、Lab、HCL、Cubehelix 与 Hue 插值器详解【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3本文以 d3 v7 官方文档docs/d3-interpolate/color.md为核心系统讲解 d3-interpolate 模块提供的全部颜色插值器从基础的 RGB 双端插值、多色 B 样条插值到 HSL/CIELAB/CIELChab/Cubehelix 等感知色彩空间插值与 gamma 校正。读完后你能够为任意两种颜色构建平滑过渡函数、创建循环cyclical颜色比例尺、按需控制色相的最短/长路径并结合 ColorRamp 渲染组件 的思路在 Canvas 上可视化验证任意插值器的输出。1. 颜色插值器是什么d3-interpolate 是一组插值器工厂interpolator factory你传入起始与结束颜色它返回一个函数t ∈ [0, 1] → 颜色。这正是 d3 中所有颜色过渡的底层机制——比例尺d3-scale、过渡动画d3-transition、色板d3-scale-chromatic最终都依赖这些函数在两个或多个颜色之间取值。从仓库结构看src/index.js 中export * from d3-interpolate将本模块全部 API 汇入 d3 主命名空间因此d3.interpolateRgb等函数在引入整个 d3 包后直接可用本仓库 package.json 声明其依赖为d3-interpolate: ^3.0.1。所有双端插值器遵循统一约定参数a、b可以是任何 d3 可解析的颜色输入字符串、数字色、已解析的颜色对象返回的插值器在t 0处给出颜色a在t 1处给出颜色b返回值统一为RGB 颜色字符串如rgb(93, 98, 202)可直接用于 SVG/Canvas/CSS。下表汇总了docs/d3-interpolate/color.md中列出的全部颜色插值 API插值器色彩空间色相路径gamma 支持多色 B 样条变体interpolateRgbRGB—✔interpolateRgbBasis/interpolateRgbBasisClosedinterpolateHsl/interpolateHslLongHSL最短 / 长路径✘—interpolateLabCIELAB—✘—interpolateHcl/interpolateHclLongCIELChab最短 / 长路径✘—interpolateCubehelix/interpolateCubehelixLongCubehelix最短 / 长路径✔—interpolateHue色相角0–360最短路径✘—2. interpolateRgb(a, b)默认选择d3.interpolateRgb(purple, orange)在 RGB 色彩空间中对两个颜色做线性插值并支持可配置的 gamma缺省为 1.0。关键特性输入不限于 RGB。a和b可以是任何 d3 能解析的颜色如hsl(120, 50%, 40%)、十六进制、d3.hcl(...)对象内部会先经d3.rgb转换为 RGB 空间参见 d3-color 文档插值器返回 RGB 字符串。RGB 插值计算简单、速度快且interpolateRgb是d3.interpolate在两个可解析颜色之间的默认实现之一。缺点是在色相差异大时如紫到橙可能经过灰败的中段这正是下面各感知色彩空间插值器存在的意义。3. 多色 B 样条插值interpolateRgbBasis 与 interpolateRgbBasisClosed标准插值器只在两个端点之间混合spline 插值器则在t∈ [0,1] 上用分段多项式函数平滑地穿过多个输入值目前 d3 仅支持三次均匀非有理 B 样条cubic uniform nonrational B-spline即 basis spline。3.1 interpolateRgbBasis(colors)d3.interpolateRgbBasis([purple, green, orange])返回一个穿过给定颜色数组的均匀非有理 B 样条插值器颜色会被转换到 RGB 空间。其隐式控制点保证t 0时返回colors[0]t 1时返回colors[colors.length - 1]。注意透明度插值目前不受支持。该函数是通用版本 interpolateBasis 在颜色上的特化d3-scale-chromatic 文档 中有大量基于它构建连续色板的实例如d3.interpolateRdYlGn等顺序色板本质上都是interpolateRgbBasis对一组精心挑选颜色的封装。3.2 interpolateRgbBasisClosed(colors)d3.interpolateRgbBasisClosed([purple, green, orange])与interpolateRgbBasis的区别在于控制点会被隐式重复使样条在t绕 [0,1] 循环时具有C² 连续性——即t 1与t 0处颜色及其一阶、二阶变化率都平滑衔接。这正是构建循环颜色比例尺cyclical color scales如风向、相位、一天中的时刻的关键工具。透明度插值同样不受支持。其通用版本见 interpolateBasisClosed。4. 感知色彩空间插值HSL、Lab、HCLRGB 是设备空间人眼对其三个通道的变化并不敏感等权。下面三种插值器在感知均匀性更好的空间中进行过渡输出仍为 RGB 字符串。4.1 interpolateHsl(a, b) 与 interpolateHslLongd3.interpolateHsl(purple, orange) d3.interpolateHslLong(purple, orange)在 HSL 色彩空间插值。输入不限于 HSL会先经d3.hsl转换见 d3-color 文档。行为要点NaN 通道回填若某个颜色的色相hue或饱和度saturation为 NaN则取对方颜色对应通道的值最短色相路径interpolateHsl沿色相环上较短的一侧过渡interpolateHslLong与它相同但不使用最短路径——当两端色相需要绕远路经过互补色区域时例如从 350° 到 10° 经过红、黄而不是直接跨过 0° 缝隙使用 Long 变体。4.2 interpolateLab(a, b)d3.interpolateLab(purple, orange)在 CIELAB 色彩空间插值。CIELAB 设计目标是对人眼感知的均匀性L通道表示亮度a、b表示色度因此 Lab 插值通常在中间调上比 RGB 插值更鲜艳、更自然。输入会先经d3.lab转换见 d3-color 文档。4.3 interpolateHcl(a, b) 与 interpolateHclLongd3.interpolateHcl(purple, orange) d3.interpolateHclLong(purple, orange)在 CIELChabCIELAB 的柱状表示亮度 L、色度 C、色相 h空间插值。输入经d3.hcl转换见 d3-color 文档。NaN 处理与最短色相路径语义和 HSL 版本一致色相或色度为 NaN 时取对方通道值默认走最短路径Long 变体不走最短路径。4.4 如何选择需要精确控制沿色相环走哪一边选 HSL 或 HCL 及其 Long 变体追求中间颜色饱满、视觉均匀选 Lab 或 HCL与 CSS/通用工具链兼容性最高、性能优先选 RGB。5. Cubehelix 插值与 gamma 校正5.1 interpolateCubehelix / interpolateCubehelixLongd3.interpolateCubehelix(purple, orange) // 配置 gamma d3.interpolateCubehelix.gamma(3)(purple, orange)Cubehelix 是一个螺旋形的颜色空间沿色相旋转的同时亮度单调变化专为顺序数据sequential data设计能在单色系中同时表达色相变化 明暗层次。输入会先经d3.cubehelix转换见 d3-color 文档。与 HSL/HCL 相同NaN 通道取对方值、默认最短色相路径interpolateCubehelixLong为不走最短路径的版本d3.interpolateCubehelixLong(purple, orange) d3.interpolateCubehelixLong.gamma(3)(purple, orange)5.2 interpolateColor.gamma(gamma)d3.interpolateRgb.gamma(2.2)(purple, orange)gamma 机制是 d3 颜色插值中最容易被忽视、但影响最大的一个参数。屏幕显示的亮度与存储的像素值之间是 gamma 幂律关系典型值 2.2。若在 gamma 校正后的线性光空间直接插值中间颜色会比预期更暗或更亮d3 的做法是用pow(γ)将通道值映射到线性空间在线性空间中线性插值再用pow(1/γ)映射回显示空间。interpolateColor.gamma(γ)适用于三个插值器interpolateRgb、interpolateCubehelix 和 interpolateCubehelixLong。调用gamma(γ)不修改原插值器而是返回同类型、带指定 gamma 的新插值器工厂无副作用的柯里化风格。关于 gamma 校正的数学原理可参考文档引用的 Eric Brasseur 的 Gamma error in picture scaling 一文。缺省 gamma 为 1.0即不做校正的普通线性插值。6. interpolateHue(a, b)色相角插值d3.interpolateHue(20, 340)(0.5) // 0返回两个色相角之间的插值器输入是数字角度而非颜色若某个色相为 NaN取对方的值沿色相环最短路径过渡返回值是[0, 360)区间内的数字。上例中 20° 到 340° 的最短路径是向上跨过 0°20° → 0°(360°) → 340°故t 0.5时恰为 0。这个插值器常被嵌入自定义插值中用来单独控制色相通道例如保持亮度不变、只旋转色相也是理解 HSL/HCL/Cubehelix 内部色相处理逻辑的参照。7. 用 Canvas 验证插值器ColorRamp 的渲染思路官方文档中每个插值器下方都展示了一条由 组件绘制的渐变色带其源码在 docs/components/ColorRamp.vue。该组件是一个极小的通用插值器可视化器值得学习其实现function render(canvas, color, n) { canvas.width n; canvas.height 1; const context canvas.getContext(2d); for (let i 0; i n; i) { context.fillStyle color(i / (n - 1)); // 依次取 t 0, 1/(n-1), ..., 1 context.fillRect(i, 0, 1, 1); } }它把插值器当作t → 颜色的纯函数以n默认 256等距采样点铺满一条 1 像素高的画布模板部分用image-rendering: pixelated将画布拉伸显示使色带呈像素化条状便于肉眼检查插值是否平滑、循环版本在首尾是否连续组件接收colorFunction与nNumber两个 props任何t → 颜色的插值器都可以直接复用例如interpolateRgbBasisClosed([purple, green, orange])验证其首尾衔接。在你的项目里复刻这个模式只需 10 行 Canvas 代码即可对任意插值器做可视化回归检查。8. 与周边模块的协作d3-scale-chromatic全部顺序/发散/循环色板如d3.interpolateTurbo、d3.schemeTableau10系列都是在interpolateRgbBasis/interpolateRgbBasisClosed之上构建的理解本文的 B 样条小节即可读懂色板源码。参见 d3-scale-chromatic 文档。d3-color所有输入颜色不限于目标空间的自动转换依赖d3.rgb、d3.hsl、d3.lab、d3.hcl、d3.cubehelix五个解析/转换入口。参见 d3-color 文档。d3-transition过渡动画中颜色属性的默认插值即经由d3.interpolate分发到上述颜色插值器因此本文的 gamma、最短路径等语义同样作用于动画中间帧。通用插值器对照interpolateBasis/interpolateBasisClosed的数值版本语义与颜色版本一一对应见 d3-interpolate 数值插值文档。9. 实践要点小结双端平滑变色默认interpolateRgb中间色发灰时改用interpolateHsl/interpolateLab/interpolateHcl需要沿色相环走远路时选用*Long变体HSL、HCL、Cubehelix 均提供多颜色连续渐变用interpolateRgbBasis首尾要无缝循环方向图、时钟刻度用interpolateRgbBasisClosed对亮度一致性要求高的场景如科学可视化中相邻数据不应有明暗跳变为interpolateRgb或interpolateCubehelix配置gamma(2.2)透明度opacity目前未被 B 样条颜色插值器支持需要透明度过渡时应另行对 alpha 通道插值用 Canvas 等距采样ColorRamp 思路在实现后快速目检色带连续性是低成本高收益的验证手段。以上 API 以本仓库 d3 v7d3-interpolate ^3.0.1为准interpolateHue的输出范围[0, 360)、interpolateRgb缺省 gamma 1.0 等取值细节均可在 docs/d3-interpolate/color.md 原文中逐条核对。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
