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

我希望所有值＆gt; 0有一个颜色，所有0都是#eeeeee。

任何想法我做错了什么？

Answer 1

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

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

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

1 个答案: