D3.js创建州数据字典时键未定义问题求助

你遇到的这个矛盾问题，核心原因其实是异步操作的执行顺序在搞鬼，我给你一步步拆解清楚：

为什么会出现这种“控制台显示和代码输出不一致”的情况？ #

d3.csv()是个异步函数——它会在后台悄悄加载CSV文件，同时不会阻塞后面代码的执行。你写的那两行console.log是放在d3.csv()的回调函数外面的，这意味着这两行代码会在CSV数据加载完成、回调函数还没执行的时候就先跑起来了。这时候mapData还是初始的空对象，自然找不到Alabama这个键，输出的也是空数组和undefined。

而你后来在控制台查看mapData对象时，浏览器的控制台是实时更新的——此时CSV已经加载完成，回调函数早就把数据填充到mapData里了，所以你能看到所有州的键。

怎么解决这个问题？ #

要确保你操作mapData的代码在数据完全加载后执行，有两种常用的方式：

方法1：把操作代码放进回调函数里 #

直接把需要使用mapData的逻辑放在d3.csv()的回调函数内部，这样就能保证数据填充完成后再执行：

let mapData = {};
d3.csv("./resources/states/us_2016_states.csv", function(data) { 
  data.forEach(function(d){
    mapData[d.State] = {"score": 0, "count":0, "state": d.State}
  });
  // 所有需要用mapData的代码都放到这里
  console.log(Object.keys(mapData));
  console.log(mapData["Alabama"]);
});

方法2：用Promise/async-await优化代码（适用于D3 v5及以上版本） #

如果你的D3版本是v5或更高，d3.csv()会返回一个Promise，用async-await可以让异步代码看起来像同步代码一样清晰：

async function loadAndProcessMapData() {
  let mapData = {};
  // 等待CSV数据加载完成
  const data = await d3.csv("./resources/states/us_2016_states.csv");
  data.forEach(function(d){
    mapData[d.State] = {"score": 0, "count":0, "state": d.State}
  });
  // 现在可以放心操作mapData了
  console.log(Object.keys(mapData));
  console.log(mapData["Alabama"]);
}

// 调用函数
loadAndProcessMapData();

这样调整后，你就能得到符合预期的输出结果了。

内容的提问来源于stack exchange，提问作者David Flasterstein