如何用D3.js在#01579b与#f34e54间实现0-97范围的颜色插值并钳位？

这其实是D3可视化里非常常见的颜色映射需求，我来给你一步步拆解实现方案，两种写法任你选：

方法一：手动拆分插值与比例尺（逻辑更直观） #

如果你想清晰看到每一步的处理逻辑，可以分开实现数值归一化和颜色插值：

// 1. 创建线性比例尺，把0-97的输入映射到插值需要的0-1范围，同时开启钳位
const valueNormalizer = d3.scaleLinear()
  .domain([0, 97])  // 你的输入值范围
  .range([0, 1])    // 颜色插值函数接受的参数范围
  .clamp(true);      // 关键：开启后超出0-97的输入会被限制在0或1

// 2. 创建RGB颜色插值函数，指定起始和结束颜色
const colorInterpolator = d3.interpolateRgb('#01579b', '#f34e54');

// 3. 封装成易用的获取颜色函数
function getColor(input) {
  const normalized = valueNormalizer(input);
  return colorInterpolator(normalized);
}

效果验证： #

• getColor(0) → 返回 #01579b
• getColor(97) → 返回 #f34e54
• getColor(48) → 生成中间过渡的平滑颜色
• getColor(-5) 或 getColor(100) → 分别被钳位到起始/结束颜色

方法二：用D3比例尺直接映射（代码更精简） #

D3的线性比例尺支持直接将数值范围映射到颜色范围，内部会自动处理插值逻辑，代码更简洁：

// 一步创建带钳位的颜色映射比例尺
const colorScale = d3.scaleLinear()
  .domain([0, 97])
  .range(['#01579b', '#f34e54'])
  .clamp(true);

// 使用时直接调用即可
console.log(colorScale(0));    // #01579b
console.log(colorScale(97));   // #f34e54
console.log(colorScale(100));  // #f34e54（钳位生效）

为什么这个能行？ #

当你给range传入颜色值时，D3会自动选用d3.interpolateRgb作为插值器，实现RGB空间的平滑过渡；而.clamp(true)确保任何超出domain（0-97）的输入都会被“卡住”在两端的颜色上，完美满足你的需求。

两种方法都能实现0-97整数输入的平滑颜色过渡，选哪种全看你对代码可读性的偏好~

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