在 DC.js 中加载多个 CSV，添加一个值，并将结果连接到单个数据表中

Question

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

因此，对于一个结果，我可以通过简单的方式将其加载并显示到数据表中

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) 将数据添加到交叉过滤器：

    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