Colorbrewer не определен с угловыми и d3

Question

Я пытаюсь применить градиентные цвета к срезам диаграммы солнечных лучей. Что касается ответов на этот вопрос question, я сделал некоторые исследования и начал использовать colorbrewer в своем коде.

Примечание: я ссылается как d3 и ColorBrewer в мое приложение

Код:

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

Это говорит colobrewer не определен. Наверное, я что-то упустил. Как я могу применить градиент к срезам?

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] 

квантование (х)

Учитывая значение х в области ввода, возвращает соответствующее значение в выходном диапазоне.

Заменить определение цвета:

var color = d3.scale.category10(); 

по

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

затем назначить цвета, "значение", а не "имя":

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