在DC.js中加载多个CSV,添加值,并将结果连接到单个dataTable中

Question

我有四个具有相同标题信息的CSV,每个CSV代表一年内的季度结果.

因此,对于一个结果,我可以加载它并将其显示到dataTable simple via中

d3.csv("data/first-quarter"), function(dataQ1){
    dataQ1.forEach(function(d){
        d.callTypes = d['Call Types'];
        d.callDesc  = d['Call Description'];
        d.callVol = d['Call Volume'];
        d.quarter   = 'Q1'; 
    });

    var facts = crossfilter(dataQ1);
    var timeDimension = facts.dimension(function(d){
       return d.quarter;
    });

    dataTable
      ... //data table attributes

    dc.renderAll();
});

但是,当我尝试从多个源检索并附加结果时,会出现复杂情况.

我采用的一种方法是将所有文件路径名放入一个数组中,并遍历forEach,并带有一个标志,以显示何时是最后一次呈现表的迭代.但是由于"递归太多"错误而失败了.

接下来就是这样筑巢

d3.csv(filesPathNames[0], function(dataQ1){
  d3.csv(filesPathNames[1], function(dataQ2){
    d3.csv(filesPathNames[2], function(dataQ3){
      d3.csv(filesPathNames[3], function(dataQ4){

但是这两种方法似乎都不起作用,因为我不能简单地将一个CSV值添加到另一个.所以我认为我遇到问题的地方是我不确定如何正确连接dataQ1,dataQ2,dataQ3和dataQ4.

唯一的解决方案是将Q1,Q2,Q3和Q4的附加值作为时间维度手动附加到另一个？

Answer 1

像Lars所说,你可以使用队列库.以下是这可能如何工作的示例:

步骤1)排队文件:

<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
var q = queue()
    .defer(d3.csv, "data/first-quarter")
    .defer(d3.csv, "data/second-quarter");

步骤2)等待加载文件:

q.await(function(error, q1data, q2data) {

步骤3)将数据添加到crossfilter:

    var ndx = crossfilter();
    ndx.add(q1data.map(function(d) {
        return { callTypes: d['Call Types'], 
                 callDesc: d['Call Description'],
                 callVol: d['Call Volume'],
                 quarter: 'Q1'};
    }));
    ndx.add(q2data.map(function(d) {
        return { callTypes: d['Call Types'], 
                 callDesc: d['Call Description'],
                 callVol: d['Call Volume'],
                 quarter: 'Q2'};
    }));

步骤4)根据需要使用交叉过滤器:

var timeDimension = ndx.dimension(function(d){
   return d.quarter;
});

dataTable
  ... //data table attributes

dc.renderAll();

下面是使用与dc.js库这种做法的例子:https://github.com/dc-js/dc.js/blob/master/web/examples/composite.html