根据大小值为每个旭日形弧线着色

Question

我正在使用 NVD3 制作旭日图。一般来说，我是 D3 的新手，所以我使用 NVD3 来抽象一些更复杂的东西。现在我正在处理一个从网络上获得的简单示例，但我正在尝试根据 JSON 中的 size 属性为节点（弧）着色。我知道 NVD3 可以选择在图表选项中使用 color 函数，所以这就是我尝试使用的方法：

chart: {
      type: 'sunburstChart',
      height: 450,
      color: function(d) {
        if (d.size > 3000) {
          return "red";
        } else if (d.size <= 3000) {
          return "green";
        } else {
          return "gray";
        }
      },
      duration: 250
    }

但是正如您从 plunker 中看到的那样，我正在处理结果只是灰色，因为它实际上并没有从 d.size 中获取值（它只是未定义，我是不知道为什么）。

使用我试图避免的常规 D3，我可以从中得到想要的结果：

  var path = g.append("path")
               .attr("class","myArc")
               .attr("d", arc)
               .attr("name",function(d){return "path Arc name " + d.name;})
               .style("fill", function(d) {
                 if(d.size > 3000) {
                   return "green";
                 } else  if( d.size < 3000){
                   return "red";
                 } else {
                   return "gray";
                 }
                })
               .on("click", click)
               ... //etc

我修改了一个常规的 D3 旭日形示例以获得所需的结果：

我知道标签被抬高了，但这在这里并不重要。我只想获得与常规 D3 相同的结果，但使用 NVD3 的抽象。我还没有找到任何提到使用 color: function() 的好例子。提前致谢。

Answer 1

首先使用 github 发行版中的这些 javascript 库：

<script src="http://krispo.github.io/angular-nvd3/bower_components/nvd3/build/nv.d3.js"></script>
<script src="http://krispo.github.io/angular-nvd3/bower_components/angular-nvd3/dist/angular-nvd3.js"></script>

图表选项应该是这样的：

 $scope.options = {
    "chart": {
      "type": "sunburstChart",
      "height": 450,
      "duration": 250,
      "width": 600,
      "groupColorByParent": false,//you missed this
      color: function(d, i) {
        //search on all data if the name is present done to get the size from data
        var d2 = d3.selectAll("path").data().filter(function(d1) {
          return (d1.name == d)
        })[0];
        //now check the size
        if (d2.size > 3000) {
          return "red";
        } else if (d2.size <= 3000) {
          return "green";
        } else {
          return "gray";
        }
      },
      duration: 250
    }
  }

工作代码here

根据大小值为每个旭日形弧线着色

Color each arc of sunburst based on size value

javascript

d3.js

nvd3.js