[英]Trying to load simple CSV file into D3 with queue.js
我是web dev的新手,我正在试图弄清楚如何将CSV数据加载到D3.js中,使用queue.js确保在执行代码的下一步之前数据已完全加载(这将是绘图带有数据的图表)。
我无休止地搜索了这个,但似乎无法围绕queue.js如何工作。
我有以下代码,并不明白为什么它不工作。
//Create a queue. First load CSV data, then run a function on the data once fully loaded.
queue()
.defer(d3.csv, "Workbook1.csv")
.await(makeChart(mydata));
//create global variable 'mydata' to store CSV data;
var mydata = [];
//d3 CSV loading function - load data into global variable 'mydata' and convert test scores to numeric format.
d3.csv('Workbook1.csv', function(data) {
mydata = data;
mydata.forEach(function(d){ d['Test_Score'] = +d['Test_Score']; });
console.log(mydata);
});
//create function that will print my data to the console. Once I figure this out, I'll put in some d3 code to actually make the chart.
function makeChart(data) {
console.log(data);
console.log("everything ran");
};
我在控制台中收到以下错误:“Uncaught TypeError:无法读取未定义的属性'apply'”。
我知道函数'makeChart'正在运行,因为我把'一切都运行'作为输出。 但由于某种原因,它没有通过我的'mydata'变量。
d3.csv函数中的console.log可以正常工作并输出正确的值。 但是makeChart函数中的console.log(data)在控制台中显示为“undefined”。
对于这个简单化的问题道歉,但我对此非常陌生,而且我通过谷歌搜索找到的例子并没有让我解决这个问题。
谢谢,
Ĵ
你这样做:
queue()
.defer(d3.csv, "Workbook1.csv")
.await(makeChart(mydata));//here you are calling the function makeChart
应该是这样的:
queue()
.defer(d3.csv, "Workbook1.csv")
.await(makeChart);//only function name is needed
并使图表功能应如下所示:
function makeChart(error, data) {//first param is error and not data
console.log(data);
console.log("everything ran");
};
编辑
如果你有多个网址,它将是这样的:
queue()
.defer(d3.csv, "Workbook1.csv")
.defer(d3.csv, "Workbook2.csv")
.await(makeChart);//here you are calling the function makeChart
function makeChart(error, data1, data2) {//first param is error and not data
console.log(data1);//workbook1
console.log(data2);//workbook2
console.log("everything ran");
};
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.