Colorjrewerはangularjsとd3で定義されていません

Question

サンバーストチャートのスライスにグラデーションカラーを適用しようとしています。このquestionの回答を参照して、私はいくつかの調査を行い、コード内でcolorbrewerを使用し始めました。

注：それはcolobrewerが定義されていないと言う

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

：私は私のアプリで

コードをD3とcolorbrewerの両方を参照しています。おそらく私はここで何かを逃しています。どのようにスライスにグラデーションを適用できますか？

Full Application

Answer 1

あなたは機能を戻ってきている。

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

あなたは色を返す必要があります。

return colorPicked 

を使用すると、カラースケールを変更したい場合。ここで変更します。

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

D3 Wikiから：

d3.scale.quantize（）

は、デフォルトのドメインを持つ新しいクオンタイズの規模を構築します[0,1]と デフォルトの範囲[0,1]。したがって、デフォルトの量子化スケールは の数値のラウンド関数に相当します。例えば、量子化（0.49）は0、 及び量子化（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] 

量子化（X）

入力ドメインにおける値xが与えられるが、対応する値を返しを返します出力範囲内の

あなたの色の定義を置き換えます

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

によって

var color = d3.scale.category10(); 

をし、 "値" ではなく "名前" で色を割り当てる：

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