2014-02-14 3 views
3

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

  • 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

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

+0

Ваш JSFiddle не работает вообще. Это затрудняет вам помощь. – Phrogz

+0

Он загружается для меня, у меня есть файл данных на Dropbox, возможно, это создает проблему для вас? – featherz

+0

Я могу быть здесь, но для целесообразности я жестко закодировал значения домена (которые вы можете вычислить) и внес изменения в параметр heatmapColor(). Вот [скрипка] (http://jsfiddle.net/Nivaldo/69LMQ/). – FernOfTheAndes

ответ

3

Похоже, что вы хотите получить 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.

+0

Еще один из моих быстрорастущих списков ссылок @AmeliaBR ... столько, что можно узнать и понять из ваших объяснений. От вашего преданного поклонника :-) – FernOfTheAndes

+0

@FernOfTheAndes Вы явно не видели быстрого редактирования, которое мне пришлось сделать после смешивания пороговых масштабов с * quantile * масштабами (что еще что-то еще). И твоя скрипка работала красиво - это было не совсем то, о чем попросил ОП. – AmeliaBR

+1

P.S. Рабочая версия скрипки с использованием пороговой шкалы: http://jsfiddle.net/69LMQ/1/ – AmeliaBR