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。