d3分位数比例力第一分位数 [英] d3 quantile scale force first quantile

问题描述

我正在构建一个具有从绿色到红色的颜色渐变的热图.我希望值0的单元格为绿色，并且值大于或等于1的单元格采用其他颜色. 我是这样建立规模的:

I'm building a heat map with a color gradient from green to red. I want cells with value 0 to be green, and values greater or equal than 1 to take the other colors. I'm building the scale this way :

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

但这会返回以下分位数:

But this returns me the following quantiles :

[239.16666666666677, 478.3333333333332, 717.5, 956.6666666666664, 1195.8333333333335]

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

Therefore, I have the following heatmap :
But I would like the pointed cell to be the second shade of green, since its value is strictly greater than 0.

推荐答案

在这种情况下，您不能仅使用分位数标度.编写自定义比例函数以分别处理零值.

You cannot use only quantile scale in this case. Write custom scale function to treat the zero value separately.

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';
};

这篇关于d3分位数比例力第一分位数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！