dc js中的堆积条形图按维度拆分

Question

我正在尝试在 dcjs 中创建堆栈条形图。 dcjs 的堆栈条示例非常清楚，条形图与堆栈的巨大区别在于堆栈功能。堆栈函数将同一组作为输入，它可以将第三个参数作为函数，该函数决定它必须拆分哪个值。我宁愿用一个维度来拆分整个条形图。

假设以下数据点是这样的

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 轴上所用时间的活动进行拆分，如下所示：

我如何做到这一点？

Answer 1

你的小提琴是在 dc.js 版本 1.7 上的，它已经有五年多的历史了，我无法理解。 :-/

我将它转换为 dc.js 版本 2，它也使用 D3 v3。

dc.js 不擅长展示原始数据，它更多的是展示聚合数据。但在这种情况下，为每个 activity_group 创建一个堆栈可能是有意义的；这样它就会自动分配自己的颜色。

使用 ES6 我们可以像这样得到所有activity_group 的列表：

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]));
    });

这与stacked bar example 基本相同，只是我们每个activity_group 都有一个堆栈。

请注意，我们在每个 bin 中创建所有堆栈，只是在它们不存在的地方将它们设为零。这是因为 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));
})

这是输出。为了让图例不重叠，我稍微弄乱了边距和高度，并且可能有更聪明的方法来处理这个问题：

Fork of your fiddle.

正如我所说，这会让 dc.js 做一些它不想做的事情，所以 YMMV！