Come faccio a garantire che D3 finisca di caricare diversi CSV prima dell'esecuzione di javascript?

Question

Sto caricando un file CSV di un elenco di altri file CSV in javascript utilizzando D3.

Quando si esegue il codice seguente, l'array employee è ancora vuoto dal momento in cui viene inserito nel codice. C'è un modo corretto per garantire che D3 completi il ​​caricamento dei dati prima che il javascript continui?

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 "[]" 

Se mi carica la pagina in Chrome, quando entro in console e accedo dipendenti, abbastanza sicuro che restituisce l'array pieno di nomi. Come posso farlo al momento in cui eseguo console.log (dipendenti) sull'ultima riga?

Answer 1

Il tuo codice sembra buono. È solo che stai registrando employees prima che i dati siano pronti. Ma se hai console.log nell'ultima riga di parseList dovresti averlo.

Answer 2

Si potrebbe utilizzare queue.js per raccogliere i risultati di tutte le chiamate 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) 
}