如何在 D3 v7 中正确处理异步 CSV 数据加载并避免全局数组未定义问题_技术教程

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

D3 v7 的 d3.csv() 返回一个 Promise，其内部数据解析与赋值操作是异步完成的。原代码中，data() 函数调用后立即执行 createMarkers(map)，此时 lat、projectName 等全局数组尚未被填充（因 .then() 回调还未执行），因此 lat.length 为 0，所有索引访问均返回 undefined——这正是问题的核心。

要修复此问题，必须让 initMap() 等待 CSV 加载与数组填充完全结束。关键有两点：

data() 函数需返回 d3.csv() 的 Promise；
调用处必须 await data()，而非仅调用 data()。

此外，原代码中存在几处需同步修正的细节：

CSV 解析器函数中误将字符串字段（如 Project_Name, Artist）用 + 转为数字（应直接保留字符串）；
d3.csv() 的类型转换函数参数名 d 与后续 .then() 中的 d 冲突，易引发混淆；
全局变量 map 被局部 const map 遮蔽，导致 createMarkers(map) 传入的是局部变量，而函数内实际使用的是全局 map（未初始化）。

以下是修正后的完整可运行代码：

// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { LatLng } = await google.maps.importLibrary("core");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

// Global variables (initialized)
let map;
let projectName = [];
let artist = [];
let lat = [];
let long = [];
let markers = [];

// ✅ Return the Promise to enable await
async function loadData() {
  return d3.csv("/data/single.csv", (row) => ({
    projectName: row.Project_Name,   // ✅ Keep as string
    artist: row.Artist,               // ✅ Keep as string
    lat: parseFloat(row.Latitude),    // ✅ Parse number safely
    long: parseFloat(row.Longitude),  // ✅ Parse number safely
  }));
}

// ✅ Accept map instance as parameter (avoid global dependency)
function createMarkers(m) {
  for (let z = 0; z < lat.length; z++) {
    markers[z] = new google.maps.Marker({
      position: new google.maps.LatLng(lat[z], long[z]),
      map: m,
      title: projectName[z],
    });
  }
}

async function initMap() {
  map = new Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 37.4239163, lng: -122.0947209 },
    mapId: "[MAP ID]",
    mapTypeControl: false,
  });

  const infoWindow = new google.maps.InfoWindow({
    content: "",
    disableAutoPan: true,
  });

  // ✅ Await CSV loading AND array population
  try {
    const data = await loadData(); // Returns parsed array of objects
    // Populate global arrays
    projectName = data.map(d => d.projectName);
    artist = data.map(d => d.artist);
    lat = data.map(d => d.lat);
    long = data.map(d => d.long);
  } catch (error) {
    console.error("Failed to load CSV:", error);
    return;
  }

  // ✅ Now safe to create markers
  createMarkers(map);
}

initMap();