根据大小值为每个阳光的弧度着色

Question

我正在与NVD3合作制作一张旭日图表。我一般都是D3的新手，所以我使用NVD3来抽象一些更复杂的东西。现在我正在使用我从网上获得的一个简单示例，但我正在尝试根据JSON中的<tr> <th>Fish In/Out</th> <th><input id="fishStart" type="number" name=""></th> <th colspan="2"><input type="number" name="" disabled></th> <th><input id="fishEnd" class="end" type="number" name=""></th> <th><input id="fishNet" class="net" type="number" name="" disabled></th> </tr> <tr> <th>Triangle</th> <th><input id="triangleStart" type="number" name=""></th> <th colspan="2"><input type="number" name="" disabled></th> <th><input id="triangleEnd" class="end" type="number" name=""></th> <th><input id="triangleNet" class="net" type="number" name="" disabled></th> </tr> <tr> <th>Vegas/Reel</th> <th><input id="IEvegasReel" type="number" name="" disabled></th> <th colspan="2"><input type="number" name="" disabled></th> <th><input id="vegasEnd" class="end" type="number" name=""></th> <th><input id="vegasNet" class="net" type="number" name="" disabled></th> </tr> <tr> <th>Diamond</th> <th><input id="Diamond" type="number" name="" disabled></th> <th colspan="2"><input type="number" name="" disabled></th> <th><input id="diamondEnd" class="end" type="number" name=""></th> <th><input id="diamondNet" class="net" type="number" name="" disabled></th> </tr> <tr class="w3-light-grey"> <th colspan="4" style="text-align: left!important;">Total Cash (Red. End + Dia. End)</th> <th colspan="2"><input id="TotalCash" type="number" name="" disabled></th> </tr> 属性为节点（弧）着色。我知道NVD3可以选择在图表选项中使用size功能，以便我尝试使用这样的功能：

color

但正如您在我正在研究的plunker中所看到的那样，结果只是灰色，因为它实际上并没有从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，我可以从中获得所需的结果：

d.size

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

我知道标签已被抬高，但这并不重要。我想获得与常规D3相同的结果，但是需要抽象NVD3。我还没有找到任何提及使用 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 的好例子。提前谢谢。

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