为什么我不能通过 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()解决方案，它只是为了让您的编码体验更轻松。