將數據從csv復制到D3中的數組中

Question

我知道之前已經問過這個問題，但他們的解決方案由於某些原因不適合我。

我試圖用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 Array [] field2 Array []

哪里：

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
• 將d3.csv方法轉換為d3.csv.parse方法
• csv到d3.js中的數組
• http://learnjsdata.com/read_data.html
• http://bl.ocks.org/enjalot/1525346

但我似乎失蹤或忽視了一些東西..請幫忙！

Answer 1

原因是

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

在這里工作代碼

希望這可以幫助！