如何使用crossfilter2基于数组维度生成dc.DataTable统计数据表

原始数据结构 #

已实现的饼图逻辑 #

借助crossfilter2已经完成了每个姓名出现次数的统计饼图，代码如下：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.4/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.2.7/dc.min.js"></script>
<script type="text/javascript">
    var pie_chart = new dc.PieChart("#pie-chart");
    d3.csv("data.csv").then(function(data) {
        var ndx = crossfilter(data);
        var nameDim = ndx.dimension(function(d){return d.Name.split(",");});
        var nameGroup = nameDim.group();
        pie_chart
          .dimension(nameDim)
          .group(nameGroup);
        pie_chart.render();
    });
</script>

饼图输出符合预期：Jack、Mike、Amy、Rachel各对应独立切片，其中Amy出现3次占比最高。

遇到的问题 #

使用相同维度渲染dc.DataTable时，只会输出逗号分隔的整行姓名字符串，无法按单个姓名拆分展示统计值，初始表格代码如下：

var table = new dc.DataTable("#table");
table
  .width(500)
  .height(200)
  .dimension(nameDim)
  .columns(["Name"]);
table.render();

期望实现的表格效果：

最终解决方案 #

<div id="pie-chart"></div>
<div id="table" class="table"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.4/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.2.7/dc.min.js"></script>
<script type="text/javascript">
    var data = [{
        "IDX": 1,
        "Author": "Jack|Mike|Amy"
    }, {
        "IDX": 2,
        "Author": "Amy|Mike"
    }, {
        "IDX": 3,
        "Author": "Amy"
    }, {
        "IDX": 4,
        "Author": "Jack|Rachel"
    }]

    var pie_chart = new dc.PieChart("#pie-chart");
    var ndx = crossfilter(data);
    // 创建多值维度时传入第二个参数true，开启数组拆分识别
    var nameDim = ndx.dimension(function(d) {
        return d.Author.split("|");
    }, true);
    var nameGroup = nameDim.group();

    pie_chart
        .dimension(nameDim)
        .group(nameGroup);
    pie_chart.render();

    var table = new dc.DataTable("#table");
    table
        .width(500)
        .height(200)
        // 传入包装后的可反转分组适配表格排序逻辑
        .dimension(reversible_group(nameGroup))
        // 自定义列分别取分组的key（姓名）和value（统计次数）
        .columns([
            function(d) { return d.key },
            function(d) { return d.value }
        ])
        .order(d3.descending);

    table.render();

    // 包装分组使其支持表格的bottom排序调用
    function reversible_group(group) {
        return {
            top: function(N) {
                return group.top(N);
            },
            bottom: function(N) {
                return group.top(Infinity).slice(-N).reverse();
            }
        };
    }
</script>

内容的提问来源于stack exchange，提问作者Adam Boyher