Colorbrewer ist nicht definiert mit angularjs und d3

Question

Ich versuche, Farbverlaufsfarben auf die Scheiben von Sunburst Diagramm anzuwenden. Mit Bezug auf die Antworten auf diese question, habe ich einige Nachforschungen gemacht und begann, die colorbrewer innerhalb meines Codes zu verwenden.

Hinweis: Ich habe verwiesen beide d3 und ColorBrewer in meiner app

Code:

var path = g.append("path") 
      .attr("d", arc) 
      .style("fill", function(d) { 
       var colorPicked = color((d.children ? d : d.parent).name); 
       console.log("ColorPicked",colorPicked) 
       return d3.scale.quantize().range(colobrewer.OrRd[8]).domain([0, 16000]); 
      }) 
      .on("click", click); 

Es sagt colobrewer ist nicht definiert. Vermutlich vermisse ich hier etwas. Wie kann ich den Farbverlauf auf die Scheiben anwenden?

Full Application

Answer 1

Sie sind wieder eine Funktion:

return d3.scale.quantize().range(colobrewer.OrRd[8]).domain([0, 16000]); 

Sie müssen eine Farbe zurück:

return colorPicked 

Wenn Sie Farbe wünschen Skala ändern. Ändern:

83  var color = d3.scale.category10(); 

Von D3 Wiki:

d3.scale.quantize()

Konstruiert eine neue Quantisierungsraster Skala mit der Standarddomäne [0,1] und der Standardbereich [0,1]. Die Standardquantisierungsskala entspricht also der Rundenfunktion für Zahlen. beispielsweise Quantisierungswert (0,49) 0 zurück, und Quantisierungswert (0,51) 1.

var q = d3.scale.quantize().domain([0, 1]).range(['a', 'b', 'c']); 
//q(0.3) === 'a', q(0.4) === 'b', q(0.6) === 'b', q(0.7) ==='c'; 
//q.invertExtent('a') returns [0, 0.3333333333333333] 

Quantisierungswert (x)

x ein Wert in der Eingabe-Domäne Gegeben zurückgibt, gibt den entsprechenden Wert im Ausgabebereich.

Ihre Farbdefinition ersetzen:

var color = d3.scale.category10(); 

von

var color=d3.scale.quantize() 
      .range(colorbrewer.OrRd[8]) 
      .domain([0, 160]); 

dann die Farben zuweisen, indem Sie "Wert" nicht "name":

var path = g.append("path") 
    .attr("d", arc) 
    .style("fill", function(d) { 
     var colorPicked = color((d.children ? d : d.parent).value); 
     return colorPicked 
    }) 
    .on("click", click);