d3：爲特定值分配顏色

Question

當我處理餅圖的數據時，我將所有小值合併到「其他」中。圖表使用d3.scale.category20着色。如何從顏色集中將「其他」指定爲特定顏色（淺灰色），並使用默認方法指定其他值？

更新：我正在尋找一種慣用的D3解決方案，如果有的話。還有什麼我可以破解自己。

Answer 1

沒有灰色創建自己的d3.scale.category20：

var myCategory20Colors = [ 
    0x1f77b4, 0xaec7e8, 
    0xff7f0e, 0xffbb78, 
    0x2ca02c, 0x98df8a, 
    0xd62728, 0xff9896, 
    0x9467bd, 0xc5b0d5, 
    0x8c564b, 0xc49c94, 
    0xe377c2, 0xf7b6d2, 
    0xbcbd22, 0xdbdb8d, 
    0x17becf, 0x9edae5 
].map(function(x) { 
    var value = x + ""; 
    return d3.rgb(value >> 16, value >> 8 & 0xff, value & 0xff).toString(); 
}); 

var myCategory20 = d3.scale.ordinal().range(myCategory20Colors); 

var original = d3.scale.category20(); 

console.log(original("x"), original("y")); 

console.log(myCategory20("x"), myCategory20("y")); 
// they produce the same result #1f77b4 #aec7e8 

從列表中（我刪除0x7f7f7f, 0xc7c7c7,），你可以用你自己的顏色代替他們。

然後，您可以簡單地檢查着色時的數據。

g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { 
     if(d.yourRowName == "Other") { 
      return "grey"; 
     } else { 
      return myCategory20(d.data.age); 
     } 
     });