javascriptを実行する前にD3で複数のCSVのロードが完了するようにするにはどうすればよいですか？

Question

私はのリストのCSVをロードしています。 CSVファイルをD3を使用してjavascriptにロードしています。

次のコードを実行すると、employees配列はコード内でまだ空になります。 D3がJavaScriptの処理を続行する前にデータのロードを完了するようにする正しい方法はありますか？

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

私がChromeにページを読み込むと、コンソールにログオンして従業員をログすると、必ず名前でいっぱいの配列が返されます。最後の行でconsole.log（従業員）を実行するときに、どうすればいいのですか？

Answer 1

コードは正常です。データが準備される前に、employeesを記録しているだけです。しかし、console.logの最後の行にある場合は、parseListにする必要があります。

Answer 2

あなたはすべてのd3.csv呼び出しから結果を収集するためにqueue.jsを使用することができます。

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) 
}