D3 量化色标未显示正确的颜色分布

Question

我试图弄清楚如何在给定可能具有广泛值的数据集的情况下获得正确的调色板。 （想想github的贡献热图）

请注意，这些值是动态的，因此我不确定是否可以使用 d3.scale.threshold。

量化数据集：

var arr = [26,12,7,6,5,5,5,4,4,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0];

我使用的是以下色标，但是，在应该着色的 41 个元素中，只有前四个有颜色，其他所有元素都设置为 #eeeeee（灰色）。

    var color_scale = d3.scale.quantize()
        .domain([0, d3.max(arr)])
        .range(["#eeeeee","#edf8e9","#bae4b3","#74c476","#238b45"]);

量化输出：

color_scale(26): #238b45
color_scale(12): #bae4b3
color_scale(7) : #edf8e9
color_scale(6) : #edf8e9
color_scale(5) : #eeeeee
color_scale(4) : #eeeeee
color_scale(2) : #eeeeee
color_scale(1) : #eeeeee
color_scale(0) : #eeeeee

---

更新：

使用分位数似乎无法按预期对以下集合起作用：

分位数数据集：

var arr = [26,12,7,6,5,5,5,4,4,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

使用以下色标：

var color_scale = d3.scale.quantile()
    .domain(arr)
    .range(["#eeeeee","#edf8e9","#bae4b3","#74c476","#238b45"]);

分位数输出：

color_scale(26): #238b45
color_scale(12): #238b45
color_scale(7) : #238b45
color_scale(6) : #238b45
color_scale(5) : #238b45
color_scale(4) : #238b45
color_scale(2) : #238b45
color_scale(1) : #74c476
color_scale(0) : #edf8e9

我希望所有大于 0 的值都有颜色，所有 0 都是#eeeeee。

任何想法我做错了什么？

Answer 1

量化尺度将域划分为大小相等的块，其数量取决于范围。在您的情况下，您有 5 个值，因此域分为大小为 26/5 = 5.2 的块。第一个块（灰色）包括最多（包括 5 个）的所有内容，这就是您在输出中看到的内容。

听起来分位数比例更适合您尝试做的事情，请参阅this question。