javascript - 将颜色绑定(bind)到 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 选择选项来选择要在饼图上显示的组数据。一切工作正常，只是我希望每次渲染图表时都使用相同的颜色来表示相同的类别。有 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);
    })

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

Answer 1

使用索引位置i(如race_color(i))不起作用，因为有时，当i为0时，ra​​ce为“黑色”(A、C 组)，在另一种情况下为“白色”(B 组)。

相反，请根据实际种族值 race_color(d.race) 设置颜色键，该值在各组之间保持一致。