学习d3.js时调用.data()方法报变量data未定义问题求助

d3.csv是异步网络请求方法，你代码里的data变量仅在.then()的回调函数作用域内可访问，你把.data(data)这段逻辑写在了回调函数外部，自然会抛出变量未定义的错误，和d3的.data()方法本身无关。
你之前能在控制台成功打印数据，是因为打印语句写在了回调内部，请求成功返回数据后才会执行打印，而外部的代码在请求还未完成时就已经提前执行了。

• 方案1：把所有依赖data的图表逻辑全部移入.then()回调内部

d3.csv("data/HousePricesAroundtheWorld.csv").then((data) => {
  data.forEach((d) => {
    d.number = Number(d["annual percent change"]);
  });
  console.log(data);
  // 所有用到data的逻辑都放在回调里
  const circles = svg.selectAll("circles").data(data);
  // 后续的enter、属性赋值、事件绑定等图表逻辑也写在这里
});

• 方案2：用async/await语法简化异步流程，避免回调嵌套

// 把图表初始化逻辑封装为async函数
async function renderChart() {
  // await等待异步请求返回数据后再执行后续逻辑
  const data = await d3.csv("data/HousePricesAroundtheWorld.csv");
  data.forEach((d) => {
    d.number = Number(d["annual percent change"]);
  });
  const circles = svg.selectAll("circles").data(data);
  // 其他图表逻辑
}
// 调用初始化函数
renderChart();

内容的提问来源于stack exchange，提问作者Mi Azevedo