我使用函数 exampleData() 生成一个平面的一维数组,用于生成带有 d3.js 的 SVG 元素(vesion 3.5.5)。这非常有效。
但是当我使用下面提到的函数 load() [如数据集 = load();] 时,这会导致错误 TypeError:groupData 未定义 d3.v3.js:1688:31 。
谁能帮忙?文件数据.csv有一个名为 x 的列标题和 20 个额外的行,每行有一个整数。在网络浏览器的控制台上查询时,数组似乎还可以。
贝斯特 , 弗兰克
function exampleData() {
return [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,5, 10, 13, 19, 21, 25, 22, 18, 15, 13];
}
function load() {
d3.csv("data.csv", function(data) {
dataset2 = data.map(function(d) {
return [ +d["x"] ];
});
//console.log(dataset2);
dataset2= d3.merge(dataset2);
//console.log(data);
return dataset2;
});
}
您提供的代码不会像您描述的那样抛出任何错误,因此我想当您尝试使用加载的数据集时会发生错误,因为对于dataset = load()
,dataset
将被undefined
。
代码的问题在于,load()
没有 return 语句。
实际上load()
甚至无法返回任何内容,因为d3.csv()
异步加载数据。 d3.csv()
不返回任何内容。它启动给定csv
的请求,当此请求完成后,它将调用回调函数。
在代码中调用load()
时,调用后的下一行可能会在加载数据之前执行。如果您尝试这样做:
function load() {
d3.csv("data.csv", function(data) {
dataset2 = data.map(function(d) {
return [ +d["x"] ];
});
dataset2= d3.merge(dataset2);
console.log(dataset2);
});
}
load();
console.log("afterLoad");
将首先记录afterLoad
。稍后,当加载数据时,将记录数据集。
因此,您必须在callback
内处理数据。也许你应该有另一个函数来绘制你的图表。您必须从回调函数调用此函数,如下所示:
function load() {
d3.csv("data.csv", function(data) {
dataset2 = data.map(function(d) {
return [ +d["x"] ];
});
//console.log(dataset2);
dataset2= d3.merge(dataset2);
//console.log(data);
//call the function that needs the data
drawMyChart(dataset2);
});
}
由于您dataset2
命名数据集,因此我想有多个数据集。我在此答案中解释了如何加载多个csv文件。也许这会帮助你理解异步编程的概念。