javascript - d3js无法访问数据索引

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 3 年前。

let all_data = []

d3.tsv("https://raw.githubusercontent.com/KingJacker/movies/master/movies.tsv", function(data) {
    all_data.push(data)
});

console.log(all_data) // --> image 1

console.log(all_data[0]) // --> undefined

图像1:

为什么当我使用特定索引时数组返回 undefined？

当我手动定义数组时，它可以工作。

let manual_data = [
    {Name: "Solaris", Year: "2002",Genre: "Drama/Mystery",Length: "2 hours",IMDb: "62%","Rotten Tomatoes": "66%",Metacritic: "65%","liked this film": "64%"},
    {Name: "Toad Road",Year: "2012",Genre: "Drama/Thriller",Length: "1h 16m",IMDb: "50%","Rotten Tomatoes": "75%",Metacritic: "54%","liked this film": "78%"}
]

console.log(manual_data[0]) // works as expected

但是，当然，仅仅输入我的所有数据并不是目标。

Answer 1

d3.tsv 是 asynchronous and uses a callback. 。您在回调之后放置的代码实际上将在调用回调之前运行，因为该函数不会阻止代码的执行。如果您希望代码正常工作，则必须将其放入回调中，以便保证函数完成。

let all_data = []

d3.tsv("https://raw.githubusercontent.com/KingJacker/movies/master/movies.tsv", function(data) {
    all_data.push(data)
    // note that this is inside the callback now
    console.log(all_data)
    console.log(all_data[0])
});