如何加载多个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()是异步的。简而言之，在 csv文件下载之后，d3.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 
     } 
    }); 
}); 

当每个文件完成加载，如果语句检查，看看是否所有文件都存储在dt。如果是这样，它适用于所有的数据;如果不是，直到下一个文件加载，再次检查时才采取任何操作。最终文件将执行您想要对整个数据集执行的任何操作。