d3.js中scaleLinear函数异常，无法定位问题原因

核心问题定位 #

你的比例尺返回黑色（rgb(0,0,0)），根源是domain数值范围异常，代码里存在明显笔误：

• 计算最小值时取的是d.gdp.unGDP属性
• 计算最大值时取的是d.gdp属性

两个属性路径不一致，会导致domain上下界完全不匹配，甚至出现NaN（若部分数据缺少对应属性）。D3在比例尺初始化失败或遇到无效domain时，调用会返回默认黑色。

排查步骤 #

1. 统一属性路径：先确认数据中GDP值实际存储在d.gdp.unGDP还是d.gdp，必须用同一个属性计算min和max。
2. 验证domain有效性：定义比例尺前手动打印计算出的min和max值，检查是否为有效数值：

   const gdpValues = data.features.map(d => d.gdp.unGDP); // 替换为正确的属性路径
   const minGDP = d3.min(gdpValues);
   const maxGDP = d3.max(gdpValues);
   console.log('minGDP:', minGDP, 'maxGDP:', maxGDP);
   

   若输出含NaN，说明部分数据无该属性，需先过滤无效值。
3. 检查输入值范围：确认测试用的10是否在[minGDP, maxGDP]区间内。若domain本身无效（如min > max或存在NaN），即使输入值合理也会返回黑色。

修复后的代码示例 #

场景1：GDP值存储在d.gdp.unGDP #

// 提取并过滤有效GDP数值
const validGDPValues = data.features
  .map(d => d.gdp.unGDP)
  .filter(val => typeof val === 'number' && !isNaN(val));

// 基于有效数据定义比例尺
const colorScale = d3.scaleLinear()
  .domain([d3.min(validGDPValues), d3.max(validGDPValues)])
  .range(["#92D1A4", "#743742"]);

场景2：GDP值存储在d.gdp #

const validGDPValues = data.features
  .map(d => d.gdp)
  .filter(val => typeof val === 'number' && !isNaN(val));

const colorScale = d3.scaleLinear()
  .domain([d3.min(validGDPValues), d3.max(validGDPValues)])
  .range(["#92D1A4", "#743742"]);

额外优化 #

若要避免输入值超出domain范围时出现意外颜色，可添加.clamp(true)限制输出在range边界：

const colorScale = d3.scaleLinear()
  .domain([d3.min(validGDPValues), d3.max(validGDPValues)])
  .range(["#92D1A4", "#743742"])
  .clamp(true);

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