csv - 在 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