基於尺寸值的顏色的每個弧形的旭日形狀

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

首先使用這些JavaScript庫從GitHub分佈：

<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