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