javascript - 如何使用带有数组的维度创建带有 crossfilter2 的数据表？

Question

我有这样的数据：

IDX	姓名
1	杰克、迈克、艾米
2	艾米，迈克
3	艾米
4	杰克，瑞秋

使用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's 是最大的，有 3 个。

但是当我尝试制作一个显示相同数据的数据表时，我迷路了。使用与饼图相同的维度只会让我得到逗号分隔的字符串，而不是单独的每个人。

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

如何使表格如下所示：

姓名	数数
艾米	3
杰克	2
麦克风	2
雷切尔	1

编辑：

这是最终给了我想要的桌子的解决方案。

<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);
    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))
        .columns([function(d) {
                return d.key
            },
            function(d) {
                return d.value
            }
        ])
        .order(d3.descending);

    table.render();


    function reversible_group(group) {
        return {
            top: function(N) {
                return group.top(N);
            },
            bottom: function(N) {
                return group.top(Infinity).slice(-N).reverse();
            }
        };
    }
</script>

标签： javascriptd3.jsdc.jscrossfilter