我的数据看起来像这样：
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);
})
但是我需要做的是将相同的种族类别绑定到相同的颜色切片。我该怎么办？
最佳答案
在i中使用索引位置race_color(i)不起作用，因为有时i为0时，种族是"Black"（A，C组），在另一种情况下，它是"White"（B组） 。
而是使用实际比赛值race_color(d.race)设置颜色，这在各个组之间保持一致。
关于javascript - 将颜色绑定(bind)到d3图表中的类别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28288706/