d3 квантильная шкала сила первого квантиля

Question

Я строю карту тепла с градиентом цвета от зеленого до красного. Я хочу, чтобы ячейки со значением 0 были зелеными, а значения больше или равны 1, чтобы взять другие цвета. Я строю шкале так:

var colors = [ 
    '#27C24C', 
    '#7DB22E', 
    '#D4A10F', 
    '#F97C20', 
    '#F35F40', 
    '#FF0000' 
]; 

var colorScale = d3.scale.quantile() 
    .domain([0, d3.max(data, function (d) { return d.value; })]) 
    .range(colors); 

Но это возвращает мне следующие квантили:

[239.16666666666677, 478.3333333333332, 717.5, 956.6666666666664, 1195.8333333333335] 

Поэтому у меня есть следующий Heatmap:
Но я хотел бы заостренный ячейка будет вторым оттенком зеленого цвета, так как его значение строго больше 0.

Answer 1

В этом случае вы не можете использовать только количественную шкалу. Напишите специальную функцию масштабирования для обработки нулевого значения отдельно.

var colors = [ 
    // '#27C24C', this value must not be included in the internal range 
    '#7DB22E', 
    '#D4A10F', 
    '#F97C20', 
    '#F35F40', 
    '#FF0000' 
]; 

var colorScaleInternal = d3.scale.quantile() 
    .domain([0, d3.max(data, function (d) { return d.value; })]) 
    .range(colors); 

var colorScale = function(value) { 
    return !!value ? colorScaleInternal(value) : '#27C24C'; 
}; 

Answer 2

Хотя я не мог найти поддержку в D3 для этой функции, я был в состоянии работать вокруг него, изменяя массив диапазона отправленного на d3. Идея состоит в том, чтобы проверить с D3, если квартили повторяются, и если да, то для них все одинаковы:

var scale = d3.scale.quantile().domain(domain).range(range); 

var quantiles = scale.quantiles(); 
quantiles.unshift(d3.min(domain)); 

// Now that you have the quantiles, you can see if some of them are holding the same value, 
// and it that case set the minimum value to all of them. 
var modifiedRange = [range[0]]; 
for (var i = 1; i < range.length; i++) { 
    if (quantiles[i] === quantiles[i - 1]) { 
     modifiedRange.push(modifiedRange[i - 1]); 
    } else { 
     modifiedRange.push(range[i]); 
    } 
} 

// set the new scale 
scale.range(modifiedRange);