Цвет каждой дуги sunburst на основе значения размера

Question

Я работаю с NVD3, чтобы составить диаграмму солнечных лучей. Я новичок в D3, поэтому я использую NVD3 для абстрагирования некоторых более сложных вещей. Сейчас я работаю с простым примером, который я получил из Интернета, но пытаюсь покрасить узлы (дуги) на основе атрибута size в JSON. Я знаю, что 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 SunBurst примера, чтобы получить, что с желаемым результатом:

Я знаю, что этикетки подвешены, но это не важно здесь. Я хотел бы получить тот же результат, что и обычный 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