如何使用 CSV 数据并在 p5.js 中绘图答案

【问题标题】：How to use CSV data and draw in p5.js如何使用 CSV 数据并在 p5.js 中绘图
【发布时间】：2021-01-10 04:19:34
【问题描述】：

我对编程和 JS 很陌生。请随时纠正我，或者如果有更好的解决方案... 我正在尝试从 CSV 读取数据，如下所示：（193 行，包括标题）

Name, Model, IP, MAC
PC-1, unknown, 10.10.10.1, AA:22:BB:44:55:11
PC-2, unknown, 10.10.10.2, 11:22:33:44:55:22
PC-3, unknown, 10.10.10.3, 11:22:33:44:55:33
.
.
PC-192, unknown, 10.10.10.193 22.33.44.55.66.11

我想创建一个包含所有这些条目的地图，并将它们绘制为每台 PC 的方块，当鼠标单击特定方块时，名称、型号、IP 和 MAC 将为它们显示。

我有以下代码从 CSV 获取数据，但我一直坚持在绘制正方形的特定位置填充数据。最终，将有 192 个方格，我想为每个方格显示网络信息。

function setup() {
  createCanvas(windowWidth, windowHeight);
  fill(0);
  getData();
}

async function getData() {
  const response = await fetch('test.csv');
  const data = await response.text();

  const rows = data.split('\n').slice(1);
  rows.forEach(elt => {
  const row = elt.split(',')
  const name = row[0];
  const ip = row[2];
  const mac = row[3];
  for (i = 0; i < rows; i++){
    text(rows[i], 500,500);
  }

    // console.log(name, ip, mac);
    // return { name, ip, mac };
  });
}

function draw(){
    square(270, 280, 20); //PC-1
    square(430, 347, 20); //PC-2
    square(520, 180, 20); //PC-3
}

function mousePressed(){
  if (mouseX > 65 && mouseX < 135 && mouseY > 180 && mouseY < 205) {
    // not sure if here should ask CSV to retrive the data?
  }
}

我设法用切片删除了第一行（标题），我可以在控制台中看到数据。但我不知道如何解决这个问题..我应该为 CSV 中的每个条目分配一个变量吗？一切都应该在 setup() 或 draw() 中完成吗？请指教..

【问题讨论】：

标签： javascript p5.js

【解决方案1】：

有更好的方法来处理p5.js 中的csv 文件。你可以使用loadTable()。

链接到loadTable 文档：https://p5js.org/reference/#/p5/loadTable

所有数据都加载到object。您可以在mousePressed() 函数中使用它。

【讨论】：