如何确保 D3 在 javascript 运行之前完成加载多个 CSV?
Posted
技术标签:
【中文标题】如何确保 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
它,你应该拥有它。
【讨论】:
以上是关于如何确保 D3 在 javascript 运行之前完成加载多个 CSV?的主要内容,如果未能解决你的问题,请参考以下文章
如何在运行 Node.js 应用程序之前确保 MySQL 数据库存在