Question

我是学习d3的新手，所以对于改善我的图表中任何低效率的任何建议都将非常感激。我正在使用d3js生成一个带有两个色标的水平堆积条形图。

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

我使用此堆栈栏示例作为参考：http://bl.ocks.org/mbostock/3886208

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

在绘制单个s时，我必须执行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以包含该团队的颜色。

完整代码here。

d3js堆叠条形图与组

1 个答案: