时间戳

首页 > 解决方案 > 如何创建具有 2 个子组的 2 行图表

dc.js - 如何创建具有 2 个子组的 2 行图表

问题描述

我有这个数据集

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

我需要创建两个行图：

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

标签： dc.jscrossfilter

解决方案

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

但是构造一个假组非常容易，该组将过滤组返回的箱，并且只显示与前缀匹配的箱。

按键过滤

这是一个假组的构造函数，它按键过滤箱：

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

你的小提琴的叉子。

请注意，这两个行图不会相互过滤，因为组不会观察其自身维度的 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'))

新版本的小提琴。

推荐阅读