javascript – 将数据从csv复制到D3中的数组中

2019年7月20日 206次阅读

我知道之前已经问过这个问题,但他们的解决方案由于某些原因不适合我.

我试图用CSV文件中的数据填充两个数组,其中：

name,value
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:
Array[0]
  0:"alpha"
  1:"beta"
  2:"delta"
  3:"gamma"

field2:
Array[0]
  0:34
  1:12
  2:49
  3:89

但是当我尝试访问field1 [0]时,我得到的值是undefined

field1 undefined

我猜想发生的事情是field1数组有一个“name”列的数组数组,但我也无法通过field [0] [0]访问第一个元素.我得到的是：

TypeError: field1[0] is undefined

我是JavaScript的新手,我似乎不明白为什么数组没有正确填充为1维数组或者我做错了什么.我知道我可以在每行访问csv时遍历每一行,但我想将csv值存储在数组中,以便在脚本中全局使用.

我经历的链接是：

> 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

但我似乎失踪或忽视了一些东西..请帮忙！

最佳答案 原因是

d3.csv("data.csv",function(csv){

是一个ajax调用,所以你不能写下面的东西(你的控制台日志在ajax完成之前调用,所以你会得到意想不到的结果)：

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);

正确的方法是：

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]);
        });

工作代码here

希望这可以帮助！

点赞