如何创建包含 2 个子组的 2 行图表

Question

我有这个数据集

var arr = [{col1:"group1",col2:"subgroup1_1",amount:10},
            {col1:"group1",col2:"subgroup1_2",amount:30},
            {col1:"group1",col2:"subgroup1_1",amount:80},
            {col1:"group1",col2:"subgroup1_2",amount:10},
            {col1:"group2",col2:"subgroup2_1",amount:20},
            {col1:"group2",col2:"subgroup2_1",amount:40},
            {col1:"group2",col2:"subgroup2_2",amount:20},
            {col1:"group2",col2:"subgroup2_2",amount:90}];

我需要创建两个行图表：

第一行图表 subgroup1_1 和 subgroup1_2，uincluded in group1;
包含 subgroup2_1 和 subgroup2_2 的第二行图表，uincluded in group2。

请帮忙，附上代码 - https://jsfiddle.net/spectr747/827s3m59/25/

Answer 1

dc.js 或 crossfilter 中没有内置任何内容来按照您描述的方式拆分组。

但是构建一个 fake group 来过滤组返回的 bin 并只显示与前缀匹配的 bin 非常容易。

按键过滤

这是一个用于按键过滤 bin 的假组的构造函数：

function filter_keys(source_group, f) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return f(d.key);
            });
        }
    };
}

这样使用：

rowChart_2
  // ...
  .group(filter_keys(bGroup, k => /^subgroup1/.test(k)));

rowChart_3
  // ...
  .group(filter_keys(bGroup, k => /^subgroup2/.test(k)));

Fork of your fiddle.

请注意，由于 a group does not observe its own dimension's groups，两个行图不会相互过滤。如果您希望它们相互过滤，您可以使用具有相同定义的两个维度（但是当另一个被过滤时，一个将完全降为零）。

按另一个字段过滤

写完上面的答案后，我注意到你想用另一个字段来分割，而不是匹配关键字符串。

有点复杂，但您可以为您的维度创建一个复合键：

bDim = ndx.dimension(function (d){ return [d.col1, d.col2]; });

键的第一个数组元素是我们要拆分的列，第二个是我们要显示的键。

然后构建一个假组，它通过第一个键过滤并将其删除：

function filter_by_key_part(source_group, k) {
    return {
        all:function () {
            return source_group.all()
              .filter(({key: [k1, k2]}) => k1 === k)
              .map(({key: [k1, k2], value}) => ({key: k2, value}))
        }
    };
}

这样使用：

rowChart_2
  // ...
  .group(filter_by_key_part(bGroup, 'group1'))

New version of fiddle.

如何创建包含 2 个子组的 2 行图表

How create 2 row chart with 2 subgroups

crossfilter

dc.js

按键过滤

按另一个字段过滤