如何加载多个 csv 文件并将它们混合使用答案

【问题标题】：How to load multiple csv files and use them mixed with each other如何加载多个 csv 文件并将它们混合使用
【发布时间】：2014-07-04 14:47:03
【问题描述】：

我在理解 d3 时遇到问题。我正在尝试加载一堆 .csv 文件，同时在左栏中有一个时间戳，在右栏中有一个整数，表示教室中任何时间点出现的人数（每个教室都有自己的 .csv ）。

现在的想法是制作一个饼图，表示在多个教室之间划分一天的人数。例如，65 % 的教室 1、23 % 的教室 2 和 12 % 的教室 3。

我很难理解如何阅读这些内容，显然 d3.csv() 解析器中的所有内容都超出了它之外的所有内容的范围，这非常违反直觉。我无法从 .csv() 方法之外访问我正在解析的内容，这很奇怪，因为我正在读取 .csv 文件，如下所示：

var files = ["Bibliotheek S2.csv","Bibliotheek S8.csv","Euclides S23.csv","Lovelace Ledeganck.csv","Mercator S8.csv","Nadar S8.csv","Ortelius S8.csv","Practicum S2.csv","S12.csv","Thetis INW.csv","Turing S9.csv","Van Straelen S8.csv","Zuse S9.csv"];

dt = {};
files.forEach(function(f){
    d3.csv("lokalen/"+f,function(data){
        dt[f] = data;
    });
});

我将如何继续这个？我完全迷路了。

谢谢，米兰

【问题讨论】：

你可以嵌套调用...检查这个answer。

标签： javascript d3.js

【解决方案1】：

d3.csv() 范围内的所有内容都不可用：d3.csv() 是异步的。简而言之，d3.csv() 回调中的代码直到在 csv 文件下载后才会执行。但是，d3.csv() 之后的代码会立即执行。在您的情况下，如果您尝试在 files.forEach 循环之后立即访问 dt，则文件尚未下载。

要解决这个问题，您需要想办法让应用程序的其余部分等到所有文件都下载完毕。例如：

var files = ["Bibliotheek S2.csv","Bibliotheek S8.csv","Euclides S23.csv","Lovelace Ledeganck.csv","Mercator S8.csv","Nadar S8.csv","Ortelius S8.csv","Practicum S2.csv","S12.csv","Thetis INW.csv","Turing S9.csv","Van Straelen S8.csv","Zuse S9.csv"];

files.forEach(function(f){
    d3.csv("lokalen/"+f,function(data){
      dt[f] = data;
      if (d3.keys(dt).length == files.length){
      // Whatever you'd like to do once you load all the data
      console.log(d3.keys(dt)) // For example to check our work 
      }
    });
});

当每个文件完成加载时，该 if 语句检查是否所有文件都已存储在 dt 中。如果是这样，它适用于所有数据；如果不是，则在下一个文件加载之前不采取任何行动，然后再次检查。最终文件将执行您想要对完整数据集执行的任何操作。

【讨论】：