雷达图的 d3.js 颜色组

Question

我正在使用这个d3 Radar Chart，现在我想为组着色。

这是我的数据 -

var data = [
  [
     {axis:"volume(N)",value:0.074095419,group:"one"},
     {axis:"heightBBOX(N)",value:0.618900916,group:"one"},
     {axis:"floor_area(N)",value:0.239036487,group:"one"},
     {axis:"RatioSunExp_TotWall",value:0.670908597,group:"one"
  }],
  [
     {axis:"volume(N)",value:0.373966243,group:"two"},
     {axis:"heightBBOX(N)",value:0.418068276,group:"two"},
     {axis:"floor_area(N)",value:0.039064467,group:"two"},
     {axis:"RatioSunExp_TotWall",value:0.341108011,group:"two"
  }],
  [
     {axis:"volume(N)",value:0.675991163,group:"two"},
     {axis:"heightBBOX(N)",value:0.815015265,group:"two"},
     {axis:"floor_area(N)",value:0.94061374,group:"two"},
     {axis:"RatioSunExp_TotWall",value:0.974062924,group:"two"
  }],
  [
     {axis:"volume(N)",value:0.875950233,group:"two"},
     {axis:"heightBBOX(N)",value:0.210852068,group:"two"},
     {axis:"floor_area(N)",value:0.540645865,group:"two"},
     {axis:"RatioSunExp_TotWall",value:0.074841546,group:"two"
  }]]

这些是我的颜色选项

    var color = d3.scale.ordinal()
        .domain(["one","two"])
        .range(["#CC333F","#53e87d"]);

我想用特定颜色为组 one 着色，用另一种颜色为组 two 着色。我该怎么办？

更新：当我使用下面的代码时，所有的图表都是黄色的。所以我知道该组是未定义的。我该如何解决这个问题？

color: function(d){
    if(d.group == "one"){
        return "red";
        }
    if(d.group == "two"){
        return "green";
        }
    else{
        return "yellow";
    }
    }

Answer 1

你的代码的问题在于radarChartOptions这个...

color: function(d){

... 不会检索绑定到每个元素的 datum。

这里最好的解决方案是查看插件，或通过电子邮件向其作者发送电子邮件，以了解他/她是如何传递选项的。由于我没有时间查看插件文档，这里有一个简单的解决方案，它在 渲染路径/圆圈之后绘制它们：

d3.selectAll(".radarArea").each(function(d){
  d3.select(this).style("fill", color(d[0].group))
});

d3.selectAll(".radarStroke").each(function(d){
  d3.select(this).style("stroke", color(d[0].group))
});

d3.selectAll(".radarCircle").each(function(d){
  d3.select(this).style("fill", color(d.group))
});

这是更新后的小提琴：https://jsfiddle.net/1j59znu9/