p5.js中tableRow.get()返回undefined的原因排查

API 探路者

2026-6-25

问题原因及解决方法

核心问题1：未指定CSV表头识别模式

p5.js的loadTable()默认不会将CSV第一行识别为列名，导致你通过tableRow.get("lat")、tableRow.get("lon")无法匹配到对应列，返回undefined。必须显式传入"header"参数来启用表头模式。

核心问题2：CSV读取数据为字符串类型

从CSV中读取的经纬度是字符串格式，直接传入map()函数会导致坐标计算错误，需要转换为数值类型。

次要问题：变量大小写不一致

代码中声明了let Soho;，但预加载时使用soho = loadImage(...)，会导致soho成为隐式全局变量，虽不直接影响经纬度读取，但不符合代码规范。

修正后的完整代码

let soho; // 修正大小写，保持变量名一致
let table;
let lat, lon, xgeo, ygeo;

let mapGeoLeft = -0.1424;
let mapGeoRight = -0.131;
let mapGeoTop = 51.5164;
let mapGeoBottom = 51.5093;

function preload() {
  soho = loadImage("cholera.png");
  // 添加"header"参数，指定CSV第一行为列名
  table = loadTable("cholera.csv", "header");
}

function setup() {
  createCanvas(600, 600);
  background(soho);
}

function draw() {
  for (let r = 0; r < table.getRowCount(); r++) {
    let tableRow = table.rows[r];
    // 将字符串类型的经纬度转换为数值
    lat = Number(tableRow.get("lat"));
    lon = Number(tableRow.get("lon"));

    xgeo = map(lon, mapGeoLeft, mapGeoRight, 0, width);
    ygeo = map(lat, mapGeoTop, mapGeoBottom, 0, height);

    fill(255, 0, 0);
    strokeWeight(0.5);
    circle(xgeo, ygeo, 5);
  }
  print(lat);
  noLoop();
}