如何使用自定义颜色表替代d3的interpolateViridis生成图例

实现步骤 #

你只需要把自定义颜色表转换为D3可识别的线性插值色阶，替换原有d3.interpolateViridis的配置即可，原有图例渲染逻辑无需修改。

1. 解析自定义颜色表生成专属色阶

先把你给出的colorsTable拆分为数值断点域和对应颜色范围，用d3.scaleLinear生成可插值的自定义颜色映射函数：

const colorsTable = [
    [ 0.00, 1.00, 0.00, 0.00 ],
    [ 0.25, 0.71, 0.71, 0.00 ],
    [ 0.50, 0.00, 1.00, 0.00 ],
    [ 0.75, 0.00, 0.71, 0.71 ],
    [ 1.00, 0.00, 0.00, 1.00 ]
];

// 拆分数值断点和对应颜色
const colorDomain = colorsTable.map(item => item[0]);
const colorRange = colorsTable.map(item => {
    // 注意原RGB是0-1范围，转为CSS常用的0-255范围
    const r = Math.round(item[1] * 255);
    const g = Math.round(item[2] * 255);
    const b = Math.round(item[3] * 255);
    return `rgb(${r},${g},${b})`;
});

// 生成自定义颜色比例尺
const customColorScale = d3.scaleLinear()
    .domain(colorDomain)
    .range(colorRange)
    .clamp(true); // 可选：超出domain范围的数值自动取两端颜色，避免异常色值

2. 替换原有颜色比例尺配置

把原来用d3.interpolateViridis的部分替换为上面生成的自定义比例尺，按你的需求设置实际业务数值域即可：

// 替换原有colorScale2，保留你需要的domain [0, 0.38]
var colorScale2 = customColorScale.copy().domain([0,0.38]);

// 原有图例调用逻辑完全不用改
continuous("#legend2", colorScale2);

说明

你原来写的continuous函数逻辑可以完全复用，因为D3的比例尺本身就是可调用的函数，不管是scaleSequential还是自定义的scaleLinear，都支持接收一个数值返回对应颜色值，和原有渲染逻辑完全兼容。

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