D3中使用发散配色方案报错：Uncaught TypeError: t is not a function

嘿，我刚踩过一模一样的坑！你看到的这个错误跟你代码里的变量完全没关系——核心原因是你把发散型配色插值器（比如d3.interpolateSpectral）错用到了专为顺序渐变配色设计的d3.scaleSequential上，两者不兼容导致D3内部逻辑报错，那个t是D3插值函数里的内部参数，和你的代码无关。

为啥会出这个错？ #

d3.scaleSequential是给那种从A色平滑过渡到B色的顺序渐变场景用的，它要求传入的插值函数是单参数连续函数，输入[0,1]区间的值就能输出对应颜色。但像d3.interpolateSpectral这种发散配色，是要从两端颜色向中间某个转折点渐变的，它的底层逻辑需要处理对称的输入范围，直接塞给scaleSequential会让内部参数调用混乱，就抛出了你看到的错误。

正确解法：用d3.scaleDiverging #

D3专门为发散配色提供了d3.scaleDiverging比例尺，完美适配这类插值器。给你写个实用示例：

// 创建发散颜色比例尺，指定插值器和定义域
var color = d3.scaleDiverging(d3.interpolateSpectral)
  .domain([-100, 0, 100]); // 定义域必须传三个值：最小值、中间转折点、最大值

关键注意点 #

• scaleDiverging的定义域必须是三个数值：最小值、中间的颜色转折点、最大值。D3会自动将你的数据映射到[-1,1]区间，再传给发散插值器，实现从两端向中间渐变的效果。
• 如果你的数据范围是[0,1]，可以把定义域设为[0, 0.5, 1]，让中间转折点落在0.5的位置。

避坑：别再这么写了 #

你之前的错误写法大概是这样的，一定要避开：

// 错误示范：用scaleSequential搭配发散插值器
var color = d3.scaleSequential(d3.interpolateSpectral)
  .domain([0, 100]); // 仅传两个值，不符合发散配色的逻辑要求

这种写法必然会触发t is not a function错误，因为scaleSequential无法正确处理发散插值器的内部逻辑。

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