d3js堆积的条形图与组

Question

我是新来学习D3，所以任何意见，以改善任何低效率在我的图表将不胜感激。我正在使用d3js生成具有两种色阶的水平堆叠条形图。

在这个例子中，有两个球队和总共8名球员。我们首先根据总分数，然后按场均得分来制作球员。然后，我还使用两种不同的色阶来显示他们属于哪个团队。

我这个使用这个栈栏示例作为参考那样：http://bl.ocks.org/mbostock/3886208

...但为了利用色彩与球队相关的色标每个玩家（Y轴），我只好先删除填写适用于为每场比赛制作的每个包装组。然后，我必须将每个堆栈（）系列的密钥添加到该系列中的每个数据阵列。

绘制个体时，我必须做if和hard代码if条件，告诉它在哪种情况下使用哪种色阶。

这里是我的块：https://bl.ocks.org/Ognami/2128772d2d7c1d2708d973b9401e8e1f

我的问题，最重要的是有没有转嫁给所有在每个系列的数据阵列的这一关键更简单的方法？有没有解决选择哪种规模的方法？

Answer 1

这里有一些小的优化。存储色标在一个对象：

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

分配，因为域：

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

只需通过数据下降到部分选定，并从父母的“钥匙”：

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即可包含该球队的颜色。

Full code here。