如何在p5.js中使用CSV数据和绘图

Question

我对编程和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?
  }
}

我设法用slice删除了第一行(标题)，我可以在控制台中看到数据。但是我不知道如何接近problem..should，我为CSV中的每个条目分配了一个变量？应该在setup()还是draw()中完成所有操作？请指教..

Answer 1

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

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

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