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。

这里最好的解决办法是查看插件，或者给它的作者发邮件，找出 he/she 如何传递选项。由于我没有时间查看插件文档，这里有一个简单的解决方案，它在渲染 paths/circles 之后绘制它们：

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))
});

这是更新后的 fiddle：https://jsfiddle.net/1j59znu9/

d3.js 雷达图的颜色组

d3.js Color Groups for Radar Chart

javascript

colors

radar-chart

d3.js