D3.js:通过 d3 加载平面一维数组.csv导致“类型错误:组数据未定义”/使用 D3.js 加载多个 CSV 文件

D3.js: Load flat 1-dimensional array via d3.csv results in "TypeError: groupData is undefined" / Load multiple CSV files with D3.js

本文关键字：D3 加载 js 数据 未定义 文件 CSV 使用 类型 平面 d3      更新时间：2023-09-26

我使用函数 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文件。也许这会帮助你理解异步编程的概念。

相关文章：