如何在 D3 v7 中正确处理异步 CSV 数据加载并确保全局数组可用

本文详解 d3 v7 中 `d3.csv()` 的异步特性导致全局数组在函数外仍为 undefined 的根本原因，并提供基于 `async/await` 的可靠解决方案，确保数据加载完成后再执行地图标记创建等依赖操作。

D3 v7 的 d3.csv() 返回一个 promise，属于异步操作——这意味着调用它后，javaScript 会立即继续执行后续代码，而不会等待 CSV 数据解析完成。在你的原始代码中：

data(); // ← 立即返回，不等待 CSV 加载 createMarkers(map); // ← 此时 projectName、lat 等数组仍是空的！

尽管你声明了 projectName、lat 等为全局变量，但由于 d3.csv().then(…) 中的赋值逻辑发生在异步回调内，createMarkers() 在数据尚未写入数组前就被调用，因此访问 lat[z] 或 projectName[z] 自然得到 undefined（甚至 NaN，若误对字符串调用 parseFloat）。

✅ 正确做法是：让 data() 函数返回 Promise，并在调用处 await 它，从而实现串行控制流：

async function data() {   return d3.csv("/data/single.csv", (d) => ({     projectName: d.Project_Name,  // 注意：字符串无需 + 转换     artist: d.Artist,     lat: parseFloat(d.Latitude),     long: parseFloat(d.Longitude),   })); }  async function initMap() {   const map = new google.maps.Map(document.getElementById("map"), {     zoom: 11,     center: { lat: 37.4239163, lng: -122.0947209 },     mapId: "[MAP ID]",     mapTypeControl: false,   });    // ✅ 关键修改：await 确保数据加载完成后再继续   const csvData = await data(); // 获取解析后的数组    // 直接使用 csvData，或填充全局数组（推荐前者，更清晰）   csvData.forEach((d, i) => {     projectName[i] = d.projectName;     artist[i] = d.artist;     lat[i] = d.lat;     long[i] = d.long;   });    createMarkers(map); // 此时全局数组已就绪 }

⚠️ 注意事项：

• 避免重复类型转换：CSV 中 Project_Name 和 Artist 是文本字段，不应用 +d.Project_Name（会转为 NaN），应保持字符串类型；
• 优先使用局部数据而非全局变量：直接将 csvData 传入 createMarkers(csvData, map) 更利于测试与维护，减少副作用；
• 错误处理不可少：生产环境应包裹 try/catch：

try {   const csvData = await data();   createMarkers(map, csvData); } catch (error) {   console.error("CSV 加载失败：", error);   alert("地图数据加载异常，请刷新重试。"); }

总结：D3 的数据加载本质是 Promise 驱动，必须通过 await 或 .then() 显式等待完成。放弃“同步幻想”，拥抱 Promise 流程，才能写出健壮的地图可视化应用。