D3.js雷达图分组着色问题：如何按指定颜色为分组上色？

你遇到的问题根源很明确：颜色回调里的d对象并不是你以为的单个数据点，而是整个雷达图的数据集数组，所以d.group会返回undefined，最终触发else分支显示黄色。

先看你的数据结构：

var data = [ 
  [ {axis:"volume(N)",value:0.074095419,group:"one"}, ... ], // 这是group为"one"的完整雷达图数据
  [ {axis:"volume(N)",value:0.373966243,group:"two"}, ... ], // group为"two"的第一组雷达图
  ...
];

当你给雷达图的路径（或填充元素）绑定数据时，绑定的是外层数组里的每个子数组（也就是每一张雷达图的完整数据），而不是子数组里的单个{axis, value, group}对象。所以回调函数里的d是整个子数组，自然没有group属性。

这里有两种简单的修复方案：

方案1：从子数组的第一个元素取group值 #

因为每个子数组里的所有数据点的group都是一致的，直接取第一个元素的group即可：

// 要么用你写的条件判断
color: function(d) {
  const group = d[0].group;
  if(group === "one"){
    return "#CC333F";
  } else if(group === "two"){
    return "#53e87d";
  } else {
    return "yellow";
  }
}

// 更推荐直接复用你已经定义好的颜色比例尺，代码更简洁
color: function(d) {
  return color(d[0].group);
}

方案2：预处理数据，给外层数组加group属性 #

如果你觉得每次取d[0].group不够直观，可以先给每个子数组添加上group属性：

// 预处理数据，把group绑定到外层子数组上
data.forEach(dataset => {
  dataset.group = dataset[0].group;
});

// 之后颜色回调就可以直接用d.group了
color: function(d) {
  return color(d.group);
}

两种方案都能解决你的问题，推荐第一种，因为不需要额外修改数据结构，代码更轻量。

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