Загрузка нескольких CSV в DC.js, добавление значения и объединение результатов в одну таблицу данных

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

Как сказал Ларс, вы можете использовать библиотеку очередей. Вот пример того, как это может работать:

Шаг 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