Colorare ogni arco di sunburst in base al valore di dimensione

Question

Sto lavorando con NVD3 per creare una carta sunburst. Sono nuovo a D3 in generale, quindi sto usando NVD3 per astrarre alcune delle cose più complicate. In questo momento sto lavorando con un semplice esempio che ho ottenuto dal web, ma sto cercando di colorare i nodi (archi) in base all'attributo size nel JSON. So che NVD3 ha la possibilità di utilizzare una funzione color nelle opzioni del grafico ed è quello che ho cercato di usare in questo modo:

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 
    } 

Ma come si può vedere dalla plunker sto lavorando che si traduce in appena grigio , perché in realtà non sta ottenendo un valore da d.size (è solo indefinito e non sono sicuro del perché).

Utilizzando D3 regolare che sto cercando di evitare, posso ottenere il risultato volontà da questa:

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 

avevo modificato un regolare esempio raggiera D3 per ottenere che, con il risultato desiderato:

So che le etichette sono sollevate ma non è importante qui. Mi piacerebbe ottenere lo stesso risultato del normale D3 ma con l'astrazione di NVD3. Non ho trovato nessun buon esempio che menzioni l'utilizzo del color: function(). Grazie in anticipo.

Answer 1

usare In primo luogo queste librerie javascript da distribuzioni 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> 

opzioni grafico dovrebbe essere simile a questo:

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

codice funzionante here