尽管声明了全局变量,但从d3.csv读入的数组中的值在函数外部未定义

b91juud3  于 2023-07-31  发布在  其他
关注(0)|答案(1)|浏览(120)

提前感谢您的帮助!我在代码中全局声明了四个数组。然后,在从csv读取数据的函数中,我将数据值赋给数组元素。然而,数组元素在这个函数之外是未定义的,我似乎找不到问题所在……我正在使用d3版本7()和谷歌MapJavaScript API。
我的CSV文件格式为Project_Name,Artist,Lat,Long -大约有300个值。

// 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 Vars
let map;
let projectName = [];
let artist = [];
let lat = [];
let long = [];
let markers = [];

async function data() {
  d3.csv("/data/single.csv", function(d) {
    return {
      projectName: +d.Project_Name,
      artist: +d.Artist,
      lat: +d.Latitude,
      long: +d.Longitude,
    }
  }).then(function(d) {
    for (var i = 0; i < d.length; i++) {
      projectName[i] = d[i].Project_Name;
      artist[i] = d[i].Artist;
      lat[i] = parseFloat(d[i].Latitude);
      long[i] = parseFloat(d[i].Longitude);
    }
  });
}


function createMarkers(m){
  for (var 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() {
  
  const 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,
  });
  
  //READ CSV FILE
  data();
  
  //MARKERS
  createMarkers(map);
  
}

initMap();

字符串
我试过使用await,但没有解决问题。还尝试使用setTimeout,结果是NaN而不是undefined。

x3naxklr

x3naxklr1#

d3.csv是异步的。您想等待某个地方,这是正确的想法,但您必须等待d3.csv promise。如果你想“等待”数据被填充,你必须返回d3.csv promise:

async function data() {
  return d3.csv("/data/single.csv", function(d) {
   ...
  });
}

字符串
然后在调用createMarkers();之前等待数据函数:

... 
    //READ CSV FILE
    await data();
    // now your global arrays should be filled
    createMarkers();
...

相关问题