Color each arc of sunburst based on size value

Question

I am working with NVD3 to make a sunburst chart. I'm new to D3 in general so I'm using NVD3 to abstract some of the more complicated things away. Right now I am working with a simple example I got from the web, but am trying to color the nodes (arcs) based on the size attribute in the JSON. I know that NVD3 has the option to use a color function in the chart options so that's what I tried to use like so:

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
    }

But as you can see from the plunker I am working on that results in just gray, because it isn't actually getting a value from d.size (it's just undefined and I'm not sure why).

Using regular D3 which I am trying to avoid, I can get the desire result from this:

  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

I had modified a regular D3 sunburst example to get that with the desired result:

I know the labels are jacked up but that isn't important here. I'd just like to get the same result as regular D3 but with the abstraction of NVD3. I haven't found any good examples that mention using the color: function() at all. Thanks in advance.

Answer 1

Firstly use these javascript libraries from github distributions:

<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>

Chart options should be like this:

 $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
    }
  }

working code here