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

Question

我在理解 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 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 中。如果是这样，它适用于所有数据；如果没有，则在加载下一个文件并再次检查之前不会采取任何操作。最终文件将执行您想要对完整数据集执行的任何操作。