Question

我使用函数 exampleData（）生成一个平面的1维数组，用于生成带有d3.js（vesion 3.5.5）的SVG元素。这非常有效。

但是当我使用下面提到的函数 load（） [like dataset = load（）;]时，会导致错误 TypeError：groupData未定义d3.v3.js： 1688：31 。

有人可以帮忙吗？文件data.csv有一个名为 x 的列标题和另外20行，每行有一个整数。在查询webbrowser的控制台时，阵列似乎没问题。

最好，弗兰克

＆＃13;

function exampleData() {
  return  [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,5, 10, 13, 19, 21, 25, 22, 18, 15, 13];
}

＆＃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;
	 });

}

＆＃13;

Answer 1

由于您提供的代码不会像您描述的那样抛出任何错误，我猜您在尝试使用加载的数据集时会发生错误，因为使用dataset = load()，dataset将是undefined。

您的代码存在问题，load()没有返回语句。

实际上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，我猜有多个数据集。我在this answer中加载了多个csv文件的解释。也许这将有助于您理解异步编程的概念。

D3.js：通过d3.csv加载平面1维数组导致＆＃34; TypeError：groupData未定义＆＃34; /使用D3.js加载多个CSV文件

1 个答案: