javascript - dc.js - 基于单个 csv 文件中单独类别的多个折线图

Question

例如，如果我有以下 csv 文件:

类别、数量、总计
A,1,3
A,2,5
A,3,1
B,1,4
B,2,6
B,3,1
C,1,5
C,2,2
C,3,4

我能够按照以下示例将数据分离到不同的 csv 文件中并组合每个文件。

github link

但是，我想知道如果我只有一个 csv 文件并按每个分组类别分隔每个折线图，我将如何重新创建相同的折线图。

谢谢。

Answer 1

@minikomi 的答案是直接的 d3 方法。

执行此操作的 dc.js/crossfilter 方法(如果您希望图表减少每个键的值并与其他 dc 图表交互/过滤)是减少单个组中的多个值，如下所示:

var group = dimension.group().reduce(
    function(p, v) { // add
        p[v.type] = (p[v.type] || 0) + v.value;
        return p;
    },
    function(p, v) { // remove
        p[v.type] -= v.value;
        return p;
    },
    function() { // initial
        return {};
});

https://github.com/dc-js/dc.js/wiki/FAQ#rows-contain-a-single-value-but-a-different-value-per-row

然后，您可以通过将组与访问器一起传递给 .group 方法来指定每个折线图，如下所示:

lineChartA.group(group, 'A', function(a) { return x.A; })
lineChartB.group(group, 'B', function(a) { return x.B; })

如果您想将折线图合并到一个图表中，可以使用 composite chart 将它们组合起来。或series chart