如何确保 D3 在 javascript 运行之前完成加载多个 CSV？

Posted 2023-02-22

【中文标题】如何确保 D3 在 javascript 运行之前完成加载多个 CSV？

【英文标题】：How do I ensure D3 finishes loading several CSVs before javascript runs?

【发布时间】：2012-11-05 17:35:42

【问题描述】：

我正在使用 D3 将 other CSV 文件列表的 CSV 加载到 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(employees) 时，我怎样才能做到这一点？

【问题讨论】：

如果你想更清楚地看到我想要做什么，就在这里：github.com/mkwng/d3-experiments

【参考方案1】：

您可以使用queue.js 收集所有 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)

【参考方案2】：

您的代码看起来不错。只是您在数据准备好之前记录了employees。但如果你在parseList 的最后一行console.log 它，你应该拥有它。