dc.js-基于单个csv文件中不同类别的多个lineChart [英] dc.js - multiple lineChart based on separate categories in single csv file

问题描述

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

category, number, total 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链接

但是，我想知道如果我只有一个csv文件并将每个lineChart按每个分组的类别分开，我将如何重新创建相同的lineCharts.

谢谢.

解决方案

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

如果要将折线图合并为一个图表，则可以将其与github link

However, I was wondering how would I recreate the same lineCharts if I were to only have a single csv file and separate each lineChart by each grouped category.

Thanks.

解决方案

@minikomi's answer is the straight d3 way to do this.

The dc.js/crossfilter way to do this (if you want your charts to reduce values for each key and interact/filter with other dc charts) is to reduce multiple values in a single group like this:

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

Then you can specify each line chart by passing the group along with an accessor to the .group method like so:

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

If you want to combine the line charts in a single chart, you can compose them with the composite chart or series chart

这篇关于dc.js-基于单个csv文件中不同类别的多个lineChart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！