将数据从csv复制到D3中的数组中 [英] Copy data from csv into array in D3
问题描述
我知道这个问题之前已经问过，但他们的解决方案看不到为我工作的原因。
我试图填充两个数组从CSV文件其中：
名称，值
alpha，34
beta，12
delta ，49
gamma，89
我现在尝试的是
var field1 = [];
var field2 = [];
d3.csv（data.csv，function（csv）{
csv.map（function（d）{
field1.push（d.name）;
field2.push（+ d.value）;
}）
}）;
console.log（field1，field1）;
console.log（field2，field2）;
当我在浏览器上查看控制台时，看到：
field1数组[]
field2数组[]
其中：
field1：
数组[0]
0：alpha
1：beta
2： gamma
field2：
Array [0]
0:34
1:12
2:49
3:89
但是当我尝试访问field1 [0]时，我得到的值为undefined
field1未定义
我猜想发生的是field1数组有一个数组的名称列，但我不能访问第一个元素通过字段[0] [0]。我得到的是：
TypeError：field1 [0]未定义pre>
我是JavaScript的新手，我似乎不明白为什么数组没有正确填充为一个1维数组，或者如果我做某事错误。我知道，我可以遍历每行，而访问csv每行，但我想存储csv值在数组中，以便在脚本中全局使用。
我经历的链接是：
- https://github.com/mbostock/d3/wiki/CSV
- 将d3.csv方法转换为d3.csv。解析方法
- csv到数组in d3.js
- http://learnjsdata.com/ read_data.html
- http：//bl.ocks .org / enjalot / 1525346
但我似乎缺少或忽略了某些东西。 >
原因是
d3.csv（data.csv，function（csv）{
是一个ajax调用，不能写如下（您的控制台日志在ajax完成之前调用，因此您会得到意想不到的结果）：
var field1 = [];
var field2 = [];
d3.csv（data.csv，function（csv）{
//成功加载数据后执行
csv.map（function（d）{
field1.push（d.name）;
field2.push（+ d.value）;
}）
}）;
//在加载AJAX调用之前调用已完成
console.log（field1，field1）;
console.log（field2，field2）;
正确的方式是：
var field1 = [];
var field2 = [];
d3.csv（data.csv，function（csv）{
csv.map（function（d）{
field1.push（d.name）;
field2.push（+ d.value）;
}）
//在AJAX成功后调用
console.log（field1，field1）;
console.log（field2，field2）;
console.log（field1，field1 [0]）;
}）;
工作代码此处
希望这有助！
I know this question has been asked before but their solutions dont see to work for me for some reason.
I am trying to populate two arrays with data from a CSV file where:
name,value
alpha,34
beta,12
delta,49
gamma,89
What I am trying now is
var field1=[];
var field2=[];
d3.csv("data.csv",function(csv){
csv.map(function(d){
field1.push(d.name);
field2.push(+d.value);
})
});
console.log("field1",field1);
console.log("field2",field2);
When I view console on my browser I see:
field1 Array [ ] field2 Array [ ]
where:
field1:
Array[0]
0:"alpha"
1:"beta"
2:"delta"
3:"gamma"
field2:
Array[0]
0:34
1:12
2:49
3:89
However when I try to access field1[0], I get the value as undefined
field1 undefined
What I guess is happening is field1 array has an array of arrays of "name" column, but I'm not able to access the first element though field[0][0] either. What I get is:
TypeError: field1[0] is undefined
I'm very new to JavaScript and I don't seem to understand why the array is not populated correctly as a 1 dimensional array or if I'm doing something wrong. I am aware that I can iterate through each row while accessing csv per row but I want to store the csv values in array to be used globally in the script.
Links I have gone through are:
- https://github.com/mbostock/d3/wiki/CSV
- converting a d3.csv method to d3.csv.parse method
- csv to array in d3.js
- http://learnjsdata.com/read_data.html
- http://bl.ocks.org/enjalot/1525346
But I seem to be missing or overlooking something.. Please help!
The reason is that
d3.csv("data.csv",function(csv){
is an ajax call so you cannot write something like below (your console log is called before the ajax is completed so you get unexpected results):
var field1=[];
var field2=[];
d3.csv("data.csv",function(csv){
//executed after successful loading of data
csv.map(function(d){
field1.push(d.name);
field2.push(+d.value);
})
});
//called before the loading of AJAX call got completed
console.log("field1",field1);
console.log("field2",field2);
The correct way is:
var field1=[];
var field2=[];
d3.csv("data.csv",function(csv){
csv.map(function(d){
field1.push(d.name);
field2.push(+d.value);
})
//called after the AJAX is success
console.log("field1",field1);
console.log("field2",field2);
console.log("field1",field1[0]);
});
working code here
Hope this helps!
这篇关于将数据从csv复制到D3中的数组中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
