为什么我不能通过 d3 然后函数之外的索引访问我的 JavaScript 数组？

Question

最终目标是创建一个d3堆叠发散条形图。votesData对象是从数据中成功创建的，但我只能访问d3-then函数中的数据，即使数组是在它之外创建的？

代码：

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

第一组日志按预期返回数组和第一个对象，但第二组日志(在d3之外(返回votesData对象，但当试图访问对象的第一个索引时，它返回"0"；未定义"；。为什么？我该如何在d3-then函数之外的对象中迭代？或者我应该把svg区域中需要的所有东西都附加到该函数中吗？

Answer 1

then块内部的逻辑是异步的。这意味着它被安排在线程有时间时执行，和读取/votes文件的承诺已经解决。这意味着代码实际上是按以下顺序执行的：

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()解决方案，只是为了让您的编码体验更轻松。