d3 分位数比例力第一个分位数答案

【问题标题】：d3 quantile scale force first quantiled3 分位数比例力第一个分位数
【发布时间】：2016-02-17 13:08:54
【问题描述】：

我正在构建一个从绿色到红色的颜色渐变的热图。我希望值 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]

因此，我有以下热图：
但我希望指出的单元格是第二个绿色阴影，因为它的值严格大于0。

【问题讨论】：

你能分享你的数据集吗？如果您提供代码的小提琴，或者更好

标签： javascript d3.js range scale quantile

【解决方案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';
};

【讨论】：

!! 代表什么？
两个否定运算符会将值的类型“转换”为布尔值。如果该值为零，则!!value 为false。否则为true。

【解决方案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);

【讨论】：