将颜色绑定到 d3 图表中的类别

Question

我有这样的数据：

groupA = [{'race': 'Black',  'count': 7}, 
{'race': 'White',  'count': 8}, 
{'race': 'unknown', 'count': 3}]


groupB = [{'race': 'White',  'count': 5}, 
{'race': 'Asian',  'count': 8}, 
{'race': 'Black',  'count': 6}, 
{'race': 'unknown', 'count': 4}]

groupC = [{'race': 'Black',  'count': 5}, 
{'race': 'White',  'count': 8},
{'race': 'unknown', 'count': 10},
{'race':'Asian', 'count':5} 
{'race': 'Hispanic', 'count': 4}]

//...and so on

我在 d3 中使用它来构建饼图。我有一个 html select 选项来选择要在饼图上显示的组数据。一切正常，只是我希望每次呈现图表时都使用相同的颜色来表示相同的类别。有 5 个种族类别，但并非每个类别都在每个组中都有代表。

我这样定义颜色：

var race_color = d3.scale.ordinal()
  .range(["#1B9E77", "#D95F02", "#7570B3", "#E7298A", "#66A61E"]);

我正在用它来填充切片：

arcs.append("svg:path")
    .attr("fill", function(d, i){
        return race_color(i);
    })
    .attr("d", function (d) {
        return arc(d);
    })

但我需要做的是将相同的种族类别绑定到相同的颜色切片。我该怎么做？

Answer 1

使用索引位置 i，如 race_color(i) 中那样不起作用，因为有时，当 i 为 0 时，种族是 "Black"（组 A、C），在另一种情况下是 "White"（B 组）。

相反，根据实际比赛值 race_color(d.race) 为颜色设置键值，这在各组中保持一致。

Answer 2

例如，请这样准备颜色table。

var color_table = {
    'Black'   : '#1B9E77',
    'White'   : '#D95F02',
    'Asian'   : '#7570B3',
    'Hispanic': '#E7298A',
    'unknown' : '#66A61E'
};

然后像这样修改你的代码。

arcs.append("svg:path")
.attr("fill", function(d, i){
    return color_table[d.race]; // modified
})
.attr("d", function (d) {
    return arc(d);
})

将颜色绑定到 d3 图表中的类别

Bind colors to categories in d3 charts

javascript

d3.js