Тепловая карта Я пытаюсь получить эту работу как таковую:отображение 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
Любая помощь приветствуется!
Ваш JSFiddle не работает вообще. Это затрудняет вам помощь. – Phrogz
Он загружается для меня, у меня есть файл данных на Dropbox, возможно, это создает проблему для вас? – featherz
Я могу быть здесь, но для целесообразности я жестко закодировал значения домена (которые вы можете вычислить) и внес изменения в параметр heatmapColor(). Вот [скрипка] (http://jsfiddle.net/Nivaldo/69LMQ/). – FernOfTheAndes