DC.js、crossfilter - 具有不同列数的通用分组

Question

我正在尝试创建一个通用的复合图表，它可以接受任何 csv 文件，读取列并创建一个每列一行的复合折线图。

在此用例中，第一列始终是所有 csv 中的时间戳，并且不会更改，而其余列可能会有所不同。

要从任何 csv 中获取列名，我使用以下代码行。

var mappedArray = d3.entries(data[0]);

说，我的 mappedArray 是这样的：

["Date", "c1", "c2", "c3"]

我为时间戳创建了如下维度：

var DateDim = ndx.dimension(function(d){return timeFmt(d[mappedArray[0].key]); });

对于单值组，我会使用这样的东西：

var testGrp = DateDim.group().reduceSum(function(d){return +d[mappedArray[1].key]; });

对于多值组，我试过这样的方法：

    var testGrp1 = testDim.group().reduce(
                    function(p,v){
                        ++p.count;
                        p.col1 = +v[mappedArray[1].key];
                        p.col2 = +v[mappedArray[2].key];
                        ...
                        p.coln = +v[mappedArray[n].key];
                        return p;
                    },...

但是，我不能像这样硬编码，因为 mappedArray[n] 中的 'n' 可能会不断变化。

如何使用 mappedArray.length 重新创建该组？

Answer 1

您使用索引字段运算符重新创建 []。使用 for 循环根据需要创建尽可能多的 p.colX 字段。

var testGrp1 = testDim.group().reduce(
    function(p,v){
        ++p.count;
        for (let i = 1; i < mappedArray.length; i++) {
            p["col" + i] = +v[mappedArray[i].key];
        }
        return p;
    },...

编辑

关于 chart.compose 的评论中对您问题的回答。

一种可行的方法是创建一个构造所需数组的函数。

function makeComposeArray() {
    var composeArr = [];
    for(let i=1; i<=mappedArray.length; i++) {
        composeArr.push(
            dc.lineChart(chart)
              .group(testGrp1, function(d){return d['col'+i]})
              .valueAccessor(function(d){return d.value["col" + i]})
         );
    }
    return composeArr;
}
chart.compose(makeComposeArray());

DC.js、crossfilter - 具有不同列数的通用分组

DC.js, crossfilter - generic grouping with varying number of columns

composite

d3.js

crossfilter

dc.js