The color of each arc of sunlight is based on size

Question

I work with NVD3 to schedule sun rays. I am new to D3, so I use NVD3 to abstract some more complicated things. Now I am working with a simple example that I got from the Internet, but I'm trying to color the nodes (arcs) based on the size attribute in JSON. I know that NVD3 has the ability to use the color function in the chart options so that what I tried to use is like this:

 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 plunker , I work on these results only in gray color, because in reality it does not receive values ​​from d.size (this is just undefined, and I'm not sure why).

Using regular D3, which I am trying to avoid, I can get the 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 modified the regular D3 sunburst example to get it with the desired result:

I know the tags are tight, but that doesn't matter. I would like to get the same result as regular D3, but with an abstraction of NVD3. I have not found any good examples that mention the use of color: function() in general. Thanks in advance.

Answer 1

First use these javascript libraries from github distributions:

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

The chart parameters should be as follows:

  $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