使用 d3.js 从 .csv 导入数据

Posted

技术标签:

【中文标题】使用 d3.js 从 .csv 导入数据【英文标题】:Importing data from .csv using d3.js 【发布时间】:2013-03-23 03:39:46 【问题描述】:

我正在尝试使用 d3.js 从 .csv 导入一些数据。我在这样做时遇到了麻烦,想知道是否有人可以伸出援手。我的 .csv 文件格式如下:

max_i,min_i,max_f,min_f
-122.1430195,-122.1430195,-122.415278,37.778643
-122.1430195,-122.1430195,-122.40815,37.785034
-122.4194155,-122.4194155,-122.4330827,37.7851673
-122.4194155,-122.4194155,-122.4330827,37.7851673
-118.4911912,-118.4911912,-118.3672828,33.9164666
-121.8374777,-121.8374777,-121.8498415,39.7241178
-115.172816,-115.172816,-115.078011,36.1586877
-82.5618186,-82.5618186,-79.2274115,37.9308282
-79.9958864,-79.9958864,-80.260396,40.1787544
-74.1243063,-74.1243063,-74.040948,40.729688
-106.609991,-106.609991,-106.015897,35.640949

我正在尝试使用以下代码加载数据:

var dataset = []
d3.csv("data.csv", function(data) 
   dataset = data.map(function(d)  return [ +d["max_i"], +d["min_i"] ]; );
);
console.log(dataset)

但是,我只是在控制台中得到一个空的 []。谁能指出我的错误?

【问题讨论】:

【参考方案1】:

改成:

var dataset = []
d3.csv("data.csv", function(data) 
   dataset = data.map(function(d)  return [ +d["max_i"], +d["min_i"] ]; );
   console.log(dataset)
);

返回数据后,您需要在回调中检查数据集。

【讨论】:

谢谢——问题是我现在遇到了一个新错误。这就是控制台正在打印的内容。 Uncaught TypeError: Cannot call method 'map' of undefined example.html:63 (anonymous function) example.html:63 (anonymous function) d3.v2.min.js:1 r d3.v2.min.js:2 r.onreadystatechange 我编辑了我的回复,我应该注意了。由于您使用的是 v2,因此没有错误参数。 谢谢——我想我对这里的范围有点困惑。为什么我需要在回调中检查数据集,即使我将数据分配给我在 d3.csv() 函数之外定义的全局变量? 因为回调函数是异步执行的,一旦数据返回。这意味着如果您将 console.log(dataset) 放在回调之外,您将获得您定义的空数组,因为尚未返回任何数据。如果这回答了您的问题,则应将其标记为此类。帮助其他人解决同样的问题。 :) 除了说它会在返回 CSV 数据后执行之外,实际上并没有确切说明它何时会执行 CSV 内容。试着这样看,回调是一个作为参数传递给另一个函数 d3.csv() 的函数。您没有立即执行此函数,因为您没有调用它,即函数(数据)()。一旦返回数据,就会调用它。当你传入一个函数作为参数时,你基本上是在告诉 csv 函数,“嘿,当你得到数据时执行这个函数,我会继续我的脚本”。希望这会有所帮助。

以上是关于使用 d3.js 从 .csv 导入数据的主要内容,如果未能解决你的问题,请参考以下文章

MYSQL 使用 LOAD DATA INFILE 从 csv 导入数据

从 D3 中的多个 csv 文件导入数据

使用java将数据从csv文件导入访问数据库

MYSQL 使用 LOAD DATA INFILE 从 csv 导入数据

使用 COPY FROM 从 CSV 导入数据时转换列

使用 Datagrip 从 CSV 文件导入 VARRAY