Javascript 根据“大小”值为每个太阳爆发弧着色

我正在与NVD3合作制作一张太阳暴流图。一般来说，我是D3新手，所以我使用NVD3来抽象一些更复杂的东西。现在，我正在使用一个简单的示例，这个示例来自web，但我正在尝试根据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
    }

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

---

我知道标签被抬高了，但这在这里并不重要。我只想得到与常规D3相同的结果，但是使用NVD3的抽象。我还没有找到任何提到使用

color:function（）

的好例子。提前感谢。

首先使用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
    }
  }

$scope.options={
“图表”：{
“类型”：“sunburstChart”，
“高度”：450，
“持续时间”：250，
“宽度”：600，
“groupColorByParent”：false，//您错过了这个
颜色：功能（d，i）{
//如果存在名称，则搜索所有数据以从数据中获取大小
var d2=d3.selectAll（“路径”）.data（）.filter（函数（d1）{
返回（d1.name==d）
})[0];
//现在检查一下尺寸
如果（d2.尺寸>3000）{
返回“红色”；
}否则如果（d2.size不错。这与我想要的非常接近，但我想知道为什么工具提示中显示的值现在都是1，而不是它们的真实值。还有，你知道为什么这里现在有一个白色圆弧吗？以前在它的位置有一个叫做
data
。如果你在其中的一些节点上添加更多的子节点，同样的情况也会发生叶子（它会创建不可单击的白色父对象）如此plunker中所示。请注意Sunburst的左上角和示例中的右上角。好的，值问题是因为图表设置为计数而不是大小（抱歉：）但我仍在试图找到解决出现白色弧的方法。问题显然来自于我添加javascript库的时候。没有这些库，着色不起作用，但是当我添加它们时，着色起作用，但是白色弧出现了。cdn中的javascript库不支持
“groupColorByParent”：false
仅限于github区的库。关于白色的东西，我不知道你可以在他们的演示中看到相同的问题，嗯，这很有趣。不过谢谢！！
 $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
    }
  }