Question

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

在这种情况下，第一列在所有csv中始终为TimeStamp，并且不会更改，而其余各列可能会有所不同。

要从任何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;
                    },...

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

如何通过使用mappingArray.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，交叉过滤器-具有不同列数的常规分组

1 个答案: