D3.js d3js带分组的堆叠条形图

我是学习d3的新手，因此任何关于改善我的图表中任何低效的建议都将不胜感激。我正在使用d3js生成一个带有两个色标的水平堆叠条形图

在这个例子中，有两个队，共有8名球员。我们首先根据总分，然后是每场比赛的分数来统计球员。然后，我还使用两种不同的颜色来显示他们属于哪个团队

我使用这个堆栈条示例作为参考：

。。。但是为了使用与团队相关的色标给每个玩家（y轴）上色，我必须首先移除应用于每个游戏包装组的填充。然后，我必须将每个stack（）系列的键添加到该系列中的每个数据数组中

当绘制单个s时，我必须做一个if，并硬编码if条件，告诉它在哪种情况下使用哪种颜色比例

这是我的街区：

---

最重要的是，我的问题是，是否有更简单的方法将此密钥传递给每个系列中的所有数据阵列？有没有办法绕过条件来选择哪种规模？

这里有一些小的优化。在对象中存储颜色比例：

var z = {
  'a': d3.scaleOrdinal()
    .range(["#8cb6d9", "#4787ba", "#216297"]),
  'b': d3.scaleOrdinal()
    .range(["#ff5555", "#ff1122", "#990022"])
};

将这些域分配为：

for (key in z){
 z[key].domain(key);
}

只需将数据向下传递到subselection并从父级获取“密钥”：

g.append("g")
  .selectAll("g")
  .data(d3.stack().keys(keys)(data))
  .enter().append("g")
  .selectAll("rect")
  .data(d => d)
  .enter().append("rect")
  .attr("fill", function(d, i) {
    var key = d3.select(this.parentNode).datum().key;
    return z[d.data.team](key);
  });

现在，随着团队数量的增加或减少，您只需编辑

z

即可包含该团队的颜色

---

完整代码。

谢谢！我用你的建议更新了块，虽然我无法使object.values（）位正常工作，但我认为它作为一个对象而不是数组或其他东西会有一些问题。但奇怪的是，它似乎根本不需要域集？我漏掉了那一部分，它似乎相处得很好…？@Ognami，

Object

，大写字母

O

？它抛出了什么错误？是的，它说

uncaughttypeerror:Object.values不是一个函数

@Ognami，我的错，没有意识到跨浏览器的支持不是很好。请参阅更新的答案。