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

但是这 returns 我以下分位数 :

[239.16666666666677, 478.3333333333332, 717.5, 956.6666666666664, 1195.8333333333335]

因此，我有以下热图：
但我希望尖细胞是第二个绿色阴影，因为它的值严格大于 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);

d3分位数刻度力第一分位数

d3 quantile scale force first quantile

javascript

range

scale

quantile

d3.js