D3.js中if else设置矩形填充色失效，如何修正？

我正在使用以下代码计算数值：

let sizeBands = data.map(({size, count}) => size / count);
sizeBands.forEach(function(colorBand){
  if (colorBand < 60) {
    console.log(colorBand + " Under 60!")
  }
  if (colorBand >= 60) console.log(colorBand + " Over 60!")
})

这段代码输出正常，能显示正确数值。但当我尝试给D3的rect元素根据这些数值设置填充色时，所有矩形都显示绿色：

.attr('fill', function(d) {
  if (d.colorBand <= 55) {
    return "red";
  } else if (d.colorBand >= 56 && d.colorBand <= 60) {
    return "blue";
  } else {
    return "green"
  }
});

请问如何让代码为矩形设置正确的填充色？

问题出在你计算的sizeBands数组和绑定到DOM元素的原始数据没有关联。你现在只是单独生成了一个存储计算值的数组，但D3回调里的d仍然是原始data中的对象，这些对象并没有colorBand属性——所以d.colorBand实际上是undefined，在比较时会被视为NaN，自然会进入最后一个else分支返回绿色。

解决方法很简单，直接把计算后的colorBand值添加到原始数据的每个对象中：

// 替换原来的sizeBands计算代码
data.forEach(d => {
  d.colorBand = d.size / d.count;
});

// 现在可以正常验证数值（可选）
data.forEach(function(d){
  if (d.colorBand < 60) {
    console.log(d.colorBand + " Under 60!")
  } else {
    console.log(d.colorBand + " Over 60!")
  }
})

这样，当你在D3的attr('fill')回调中访问d.colorBand时，就能获取到正确的计算值，填充色的判断逻辑也就可以正常工作了。

另外可以小优化一下你的条件判断，让它更简洁：

.attr('fill', function(d) {
  if (d.colorBand <= 55) return "red";
  if (d.colorBand <= 60) return "blue";
  return "green";
});

因为第一个条件已经过滤了<=55的情况，第二个条件只需要判断<=60就可以覆盖56-60的区间，逻辑和原来一致但更清晰。

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