D3.js dcjs中按维度拆分的堆栈条形图

我正在尝试在dcjs中创建一个堆栈条形图。dcjs stack bar示例非常清楚，与stack的条形图的巨大区别在于stack函数。stack函数将同一组作为输入，它可以将第三个参数作为函数，该函数决定要拆分的值。我更希望在整个条形图上拆分一个维度

假设下面的数据点是这样的

data = [
  {activity:"A1",time_taken:10,activity_group:"Master A"},
  {activity:"A2",time_taken:20,activity_group:"Master B"},
  {activity:"A1",time_taken:30,activity_group:"Master C"},
  {activity:"A2",time_taken:15,activity_group:"Master D"}
]

我想将x轴上的活动组按其代表y轴上所用时间的活动进行拆分，如下所示：

const stacks = [...new Set(data.map(row => row.activity_group))];

---

我该如何做到这一点？

你的小提琴是在dc.js 1.7版上，它已经有五年多的历史了，我对此一无所知-/

我将其转换为dc.js版本2，它也使用D3V3

js并不擅长显示原始数据，它更多的是显示聚合数据。但是在这种情况下，为每个

活动组创建一个堆栈是有意义的；这样，它将自动指定自己的颜色

使用ES6，我们可以得到所有
活动组的列表，如下所示：

const stacks = [...new Set(data.map(row => row.activity_group))];

现在让我们按堆栈聚合数据：

var groupActivity = dimByActivity.group().reduce(
    function reduceAdd(p, v) {
        p[v.activity_group] += v.time_taken;
        return p;
    },
    function reduceRemove(p, v) {
        p[v.activity_group] -= v.time_taken;
        return p;
    },
    function reduceInitial() {
        return Object.fromEntries(stacks.map(stack => [stack,0]));
    });

这与基本相同，只是每个
活动组都有一个堆栈

请注意，我们正在每个箱子中创建所有堆栈，只是在不存在堆栈的地方将其保留为零。这是因为dc.js希望每个X值都有相同的堆栈，否则就无法工作

在堆叠条形图示例中，我们将以编程方式将堆栈添加到图表中，记住我们需要对第一个堆栈使用
.group（）
：

function sel_stack(valueKey) {
    return function(d) {
    return d.value[valueKey];
  };
}
// ...
stacks.forEach(function(stack, i) {
  if(i===0)
    chanUtil.group(groupActivity, stack, sel_stack(stack));
  else
    chanUtil.stack(groupActivity, stack, sel_stack(stack));
})

这是输出。为了使图例不重叠，我对边距和高度做了一些修改，可能有更聪明的方法来处理这个问题：



正如我所说，这让dc.js做了它不想做的事情，所以YMMV
 “拆分整个条形图”是指希望每个堆叠的条形图加起来等于Y轴的100%吗？是的，我希望按它们自己的单位加起来，而不是使其等于100%。如果你能看到这个链接，这显示了我想要的。你想让它们像那样单独着色吗？dc.js通常为每个“堆栈”着色一种颜色，因此主控A和主控B将显示为蓝色，主控C和主控D显示为橙色。在dc.js中，每个X值必须有相同数量的堆栈，但是可以通过将多余的值归零来解决这个问题。如果您想要单独的颜色，您可以将每个值放入自己的堆栈中，只要您将域的其余部分归零。有很多方法可以做到这一点，但还不确定你想做什么。我真的不关心图表的颜色，我对dc.js创建的东西很满意。我想知道如何平分一个维度，比如活动组来分割数据。我不确定这方面的方法。我可以想象有一个维度活动，并使用创建组，该组给出了所花费的时间之和。我如何在活动组中拆分该活动？请参考我的JSFIDLE这里我已经设置了相同的设置。我只需要显示每个活动按其活动组拆分的案例关闭，谢谢。您的回复让我了解了更多，并为您做出了贡献。