gpt4 book ai didi

csv - d3.js 使用访问函数和回调导入 csv

转载 作者:行者123 更新时间:2023-12-04 14:27:04 24 4
gpt4 key购买 nike

我正在尝试了解如何使用官方 API 文档中指定的访问器和回调函数来使用 d3.csv(url[, accessor][, callback])(请参阅第 1 点的链接)。免责声明:我是 d3.js 的新手。

TL,WR:我在回调函数中收到对 console.log(data) 命令的空控制台响应,并且当我对应该保存数据的变量调用 console.log 时得到未定义。

我找到了两个简单的例子来理解它是如何工作的。

  1. API本身有一个例子:d3.js API at github.com
  2. tonygarcia.me 上的一个简单示例:Chart-data at tonygarcia.me

为了执行这些,我为代码创建了一个 html 文件,并为数据创建了一个 csv 文件,然后使用命令 python -m SimpleHTTPServer 8888 & 启动了一个简单的服务器。

案例 1:官方 API 文档。

html:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js">
</script>
</head>
<body>
<script type="text/javascript">
var datas;
d3.csv("example.csv", function(d) {
return {
year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
make: d.Make,
model: d.Model,
length: +d.Length // convert "Length" column to number
};
}, function(error, rows) {
console.log(rows);
datas = rows;
});
</script>
</body>
</html>

csv(example.csv):

Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38

控制台上的输出(空)然后:

> console.log(datas);
undefined VM2228:2
undefined

预期结果:

[
{"Year": "1997", "Make": "Ford", "Model": "E350", "Length": 2.34},
{"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": 2.38}
]

案例 2:tonygarcia.me 上的图表数据

html:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js">
</script>
</head>
<body>
<script type="text/javascript">
var datas;
// load data from a CSV file
d3.csv('home.csv',
function(d) {
return {
key: d.state,
value: +d.value
};
}, function(dataset){
// code to generate chart goes here
datas = dataset;
console.log( dataset );
});
</script>
</body>
</html>

cvs (home.cvs):

state,value
Alabama,71.6
Alaska,22.4
Arizona,147.5
Arkansas,59.9
<truncated>

控制台上的输出(空)然后:

> console.log(datas);
undefined VM2265:2
undefined

预期结果(可以在网页上试试):

[{"key":"Alabama","value":71.6},{"key":"Alaska","value":22.4},     
{"key":"Arizona","value":147.5},{"key":"Arkansas","value":59.9},...]

那么,我做错了什么?如果我只使用没有访问器的回调函数,一切正常。使用访问器将数据从 sting 格式化为 f.e 很有趣。数。

谢谢大家的帮助!

最好的,

迈克尔

编辑:更正:tonygarcia.com --> tonygarcia.me

最佳答案

回调应该像这样设置:

d3.csv("your_file_url.csv", function (error, data) {
//Here you should put the code for your visualization.
});

您的第一个示例将是:

d3.csv("example.csv", function (error, data) {
console.log(data) // this will output the data contained in your csv
});

事实是函数 d3.csv 已经在数据加载时解析数据,因此如果您加载 example.csv 文件,它将被读取,然后被视为值数组

关于csv - d3.js 使用访问函数和回调导入 csv,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21008508/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com