無法用d3.js讀取csv文件

Question

我需要用d3.js讀取csv文件。我的數據文件是

x,y 
480,200 
580,400 
680,100 
780,300 
180,300 
280,100 
380,400 

和我的代碼是

var ball_1 = [] 
d3.csv("data.csv", function(data) { 
    ball_1 = data.map(function(d) { return [ +d["x"], +d["y"] ]; }); 
    }); 
console.log(ball_1) 

和控制檯日誌說

[]數組

，但如果我只寫數據陣列明確在代碼中，

var ball_1 = [ 
    [480, 200], 
    [580, 400], 
    [680, 100], 
    [780, 300], 
    [180, 300], 
    [280, 100], 
    [380, 400] 
    ]; 
console.log(ball_1) 

然後控制檯日誌說

數組[數組[2]，陣列[2]，陣列[2]，陣列[2]，陣列[2]，陣列[2]，數組[2 ]]

因此，讀取csv文件的第一個代碼不起作用。 有什麼問題？

Answer 1

d3的方法json(),csv()和tsv()是異步的。這意味着你應該寫

var ball = []; 

d3.csv('yourfile.csv', function(err, data){ 
    ball = data.map(function(d) { return [ +d["x"], +d["y"] ]; }); 

    console.log(ball); //here the code is executed when the csv is retrieved 
}); 

console.log(ball); //here the code is executed after d3.csv() is launched 

取決於服務器的速度有多快，你應該看到

Array[] 
Array[7]