javascript - 如何使用queuejs和d3js并行加载30个csv文件？

Question

这里有两个主要问题:

1. 我们想要并行加载文件

2. 因为这些文件是并行加载的，所以我们不知道它们加载的确切顺序。我想从每个文件名中解析一个键，用d3.csv解析的文件内容数组作为其对应的值

也就是说，返回的结果是

   q.awaitAll(function(error, results) { console.log("all done!"); });

应该是

results={
  "key1":array_read_from_myData_key1.csv,
  "key2":array_read_from_myData_key2.csv,
  ...
  "key30":array_read_from_myData_key30.csv
}

如何将每个文件名作为键添加到下面的每个数组 (results[i]) 中？

var q = queue(), // create the queue
    dataSources = [ // the data sources
        'myData_key1.csv',
        'myData_key2.csv',
        'myData_key3.csv',
        ...,
        'myData_key30.csv'
    ];


// Go through each data source and add it to the queue:
dataSources.forEach(function (source) {
    q.defer(function (callback) {
        d3.csv(source, callback);
    });
});

// Wait for all requests to be completed:
q.awaitAll(function (error, results) {
    console.log(results);
})

Answer 1

您可以在此处扩展您的回调:

dataSources.forEach(function (source, index) {
  q.defer(function (callback) {
    d3.csv(source, function(data){
       var fileData = {
           name: dataSources[index],
           data: data
       };
       callback(fileData);
   });
  });
});

根据您的评论，您可以尝试执行以下操作，但不能 100% 确定它会起作用:

 var finalData = {};

 dataSources.forEach(function (source, index) {
  q.defer(function (callback) {
    d3.csv(source, function(data){
       if (data) {
         //regex the key from file name
         var matcher = /^(myData)_([a-z][a-z][a-z][0-9])\.csv$/;
         var key = matcher.exec(dataSources[index])[1];
         //assign value to external object
         finalData[key] = data;
         //callback success
         callback(true);
       }
       else {
        //log error if required
        callback(false);
       }
   });
  });
});

// Wait for all requests to be completed:
q.awaitAll(function (error, results) {
   console.log(finalData);
})

希望这能解决您的问题。