為什么我不能通過 d3 之外的索引然后 function 訪問我的 JavaScript 數組？

Question

最終目標是創建一個 d3 堆疊發散條形圖。 votesData object 是從數據成功創建的，但我只能訪問 d3 內的數據，然后 function 即使數組是在它之外創建的？

代碼：

var votesData = [];

//access votes route
d3.json("/votes").then(function (data) {
    
    //loop through objects in route
    data.forEach(function (d) {

        //convert data to numeric
        demYes = +d.democratic.yes
        demNo = ~d.democratic.no //makes negative
        repYes = +d.republican.yes
        repNo = ~d.republican.no
        indYes = +d.independent.yes
        indNo = ~d.independent.no

        //append var with desired data
        votesData.push( 
            {"name": d.bill.bill_id,
            "question": d.question,
            "description": d.description,
            "votes": [
                {"category": "Democratic Yes",
                "value": demYes },
                {"category": "Democratic No",
                "value": demNo},
                {"category": "Republican Yes",
                "value": repYes},
                {"category": "Repulican No",
                "value": repNo},
                {"category": "Independent Yes",
                "value": indYes},
                {"category": "Independent No",
                "value": indNo}
            ]
        })
    });
    console.log(votesData);
    console.log(votesData[0]);


});
console.log(votesData);
console.log(votesData[0]);

第一組日志按預期返回數組和第一個 object，但第二組日志（在 d3 之外）返回 votesData object，但是當嘗試訪問 ZA8CFDE6331BD59EB2AC96F8undefined1ZCB4 的第一個索引時返回“”。 為什么？ 我將如何遍歷 d3 之外的 object 然后是 function？ 或者我應該只是 append 在 function 區域內 svg 區域所需的一切？

Answer 1

then塊內部的邏輯是異步的。 這意味着它計划在線程有時間時執行，並且讀取/votes文件的 promise 已解決。 這意味着代碼實際上是按以下順序執行的：

var votesData = [];
console.log(votesData);
console.log(votesData[0]);

//access votes route
d3.json("/votes").then(function (data) {
    ...
});

這就是它返回 undefined 的原因，它還沒有被執行！ 常見的解決方法是將所有邏輯移動到.then()塊中，或者，如果您使用的是ES2017 ，則可以使用async/await 。

var votesData = [];

//access votes route
const data = await d3.json("/votes");

//loop through objects in route
data.forEach(function (d) {

    //convert data to numeric
    demYes = +d.democratic.yes
    ...
}

console.log(votesData);
console.log(votesData[0]);

這在水下編譯的內容相當於.then()解決方案，它只是為了讓您的編碼體驗更輕松。