本文详解 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 流程，才能写出健壮的地图可视化应用。
