如何使用d3.js对色表节点间或范围外的数值点插值计算对应RGB颜色

实现方案 #

你已经引入了d3.js的前提下，直接用d3的线性标尺+RGB插值能力即可实现需求，不需要手动计算通道插值：

完整代码实现 #

import { scaleLinear, interpolateRgb } from 'd3';

// 原始色表配置
const colors = [
    [ 0.0, 247, 255, 164],
    [ 0.2, 185, 116, 255],
    [ 0.4, 73, 255, 35],
    [ 0.6, 247, 255, 164],
    [ 0.8, 185, 116, 255],
    [ 1.0, 247, 255, 164]
];

// 预处理生成标尺的定义域和颜色范围
const valueDomain = colors.map(item => item[0]);
const colorRange = colors.map(item => `rgb(${item[1]}, ${item[2]}, ${item[3]})`);

// 初始化全局颜色插值标尺，仅需初始化一次
const colorScale = scaleLinear()
  .domain(valueDomain)
  .range(colorRange)
  .interpolate(interpolateRgb);

// 对外暴露的颜色查询函数
export function rgbValues(point: number) {
  // 截断超出0~1范围的输入值，避免返回异常颜色
  const validPoint = Math.max(0, Math.min(1, point));
  const rgbColor = colorScale(validPoint);
  // 按需转换为[r,g,b]数字数组格式，不需要的话可直接返回rgbColor字符串
  const rgbParts = rgbColor.match(/\d+/g)?.map(Number) || [255,255,255];
  return rgbParts;
}

逻辑说明 #

• scaleLinear会自动识别输入值在色表节点中的区间，计算对应的插值比例
• interpolateRgb会自动对R、G、B三个通道分别做线性插值，无需手动计算每个通道的数值
• 若需要更自然的色相过渡效果，可将interpolateRgb替换为interpolateHsl，使用HSL色彩空间插值
• 测试输入0.1时，返回的结果就是[0.0, 247, 255, 164]和[0.2, 185, 116, 255]的中间色，和预期需求一致

内容的提问来源于stack exchange，提问作者Eric