Làm cách nào để đảm bảo D3 kết thúc tải một số CSV trước khi javascript chạy?

Question

Tôi đang tải CSV của danh sách khác tệp CSV vào javascript bằng D3.

Khi tôi chạy mã sau, mảng nhân viên vẫn còn trống vào thời điểm nó được đưa vào mã. Có cách nào đúng để đảm bảo rằng D3 kết thúc tải dữ liệu trước khi javascript tiếp tục không?

var employees = []; 

//Retrieve the file list of all the csvs in the data directory, then run a callback on them 
function retrieveList(url,callback) { 
    d3.csv(url,function(data) { 
     callback(data); 
    }) 
} 

//Parse a file list, and then update the employee array with the data within 
function parseList(filenames){ 
    filenames.forEach(function(d) { 
     d3.csv(d.filename,function(data) { 
      data.forEach(function(d) employees.push(d.name)); 
     } 
    } 
} 

//Run this code 
var filenamesUrl = "http://.../filenames.csv" 
retrieveList(filenamesUrl, parseList); 

console.log(employees); //This logs "[]" 

Nếu tôi tải trang trong Chrome, khi tôi đăng nhập vào bảng điều khiển và đăng nhập nhân viên, chắc chắn nó sẽ trả về mảng chứa tên. Làm thế nào tôi có thể làm cho rằng trường hợp của thời gian tôi chạy console.log (nhân viên) trên dòng cuối cùng?

Answer 1

Mã của bạn có vẻ ổn. Chỉ là bạn đang ghi nhật ký employees trước khi dữ liệu sẵn sàng. Nhưng nếu bạn console.log nó trên dòng cuối cùng của parseList bạn nên có nó.

Answer 2

Bạn có thể sử dụng queue.js để thu thập các kết quả từ tất cả các cuộc gọi d3.csv:

function parseList(filenames){ 
    var q = queue(); 
    filenames.forEach(function(d) { 
    //add your csv call to the queue 
    q.defer(function(callback) { 
     d3.csv(d.filename,function(res) { callback(null, res) }); 
    }); 
    }); 

    q.await(restOfCode) 
}  

function restOfCode(err, results) { 
    //results is an array of each of your csv results 
    console.log(results) 
}