如何加載多個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。如果是這樣，它適用於所有的數據;如果不是，直到下一個文件加載，再次檢查時才採取任何操作。最終文件將執行您想要對整個數據集執行的任何操作。