我的数据看起来像这样:
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)到相同的颜色切片。我该怎么办?
最佳答案
使用索引位置i
(如race_color(i)
)不起作用,因为有时,当i
为0时,race为“黑色”
(A、C 组),在另一种情况下为“白色”
(B 组)。
相反,请根据实际种族值 race_color(d.race)
设置颜色键,该值在各组之间保持一致。
关于javascript - 将颜色绑定(bind)到 d3 图表中的类别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28288706/