отображение d3 4 цвета до 4 числовых диапазонов, чтобы выглядеть немного, как очень простой

Question

Тепловая карта Я пытаюсь получить эту работу как таковую:

• 0 = серый
• 1-33.33 = зеленый
• 33.34-66.66 = желтый
• 66.67-100 = красный

в настоящее время не работает, но у меня есть пример кода здесь: http://jsfiddle.net/JLSt4/1/

Это конкретный блок кода:

var colors = ["#CCCCCC","#55AF29","#FFD017","#B72E00"]; 

     var heatmapColor = d3.scale.linear() 
      .domain(d3.range(0, 1, 1.0/(colors.length - 1))) 
      .range(colors); 

     var getData = d3.extent(jsondata.kpi, function (d) { return +d.status }); 
     var c = d3.scale.linear().domain(getData).range([0, 1]); 

и дисплей:

.style("fill", function(d) { return heatmapColor(c(d))}); 

Я работал с ответом на этот вопрос, но это не совсем то, что я , так как это отображает динамические значения в набор цветов: D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain

Любая помощь приветствуется!

Answer 1

Похоже, что вы хотите получить quantize scale или threshold scale - масштаб, который принимает непрерывное входное значение и разбивает его на бины для преобразования в дискретный набор выходных значений.

Для квантования масштабов вы указываете домен как обычно ([min,max]), а размер бункеров определяется количеством значений в диапазоне, так что каждый ящик имеет тот же размер.

Для пороговых масштабов вы определяете домен как набор пороговых значений, выше которых должно использоваться следующее значение из диапазона; должно быть меньше пороговых значений, тогда есть значения диапазона.

The version, что @FernOfTheAndes работает для вас - это polylinear scale: линейная шкала с различными блоками домена/диапазона. Значения между двумя точками домена преобразуются в значение, равное расстоянию между соответствующими двумя точками диапазона.

Таким образом, для полилинейнога шкалы с доменом [0,33,66,100] и диапазоном [gray,green,yellow,red] значением 0 получает отображенную до серого, значение 33 получает отображаются в зеленый цвет, а значение 15 получает отображается на серо-зеленый цвет на полпути между ними.

Напротив, для пороговой шкалы с доменом [1,33,66] и диапазоном [gray,green,yellow,red] любое значение, большее или равное 1, но менее 33, будет отображаться на чистый зеленый.

В качестве альтернативы, вы можете использовать шкалу квантования с областью [0,100], диапазон [green,yellow,red], и использовать отдельный тест, чтобы присвоить серый цвет, если значение равно 0.