Question

当我处理饼图的数据时，我将所有小值合并到“其他”中。该图表使用d3.scale.category20进行着色。如何分配＆＃39;其他＆＃39;从颜色集到特定颜色（浅灰色）并使用默认方法分配其他值？

更新：我正在寻找一个惯用的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);
         }
      });

d3：为特定值指定颜色

1 个答案: