为p5.js数据可视化添加悬浮效果失败，寻求解决方法

问题根源分析 #

你的代码存在以下几个核心问题：

• 变量作用域错误：setup函数的for循环内定义的x、y、size、artist、song、circleColor都是局部变量，全局的悬浮判断代码无法访问这些变量，直接导致绘制逻辑失效。
• 代码位置错误：悬浮判断代码未放入任何函数内，属于无效代码，p5.js不会执行这部分逻辑。
• 绘制逻辑错误：原代码注释掉了setup中的绘制语句，且空的draw()函数没有承担实时绘制与交互的职责，而p5.js的交互效果必须在draw循环中实现。
• 数据未持久化：setup中处理完每行数据后没有保存，draw函数无法遍历所有圆形数据进行判断和绘制。

修正后的完整代码 #

let table;
let circles = []; // 全局数组存储所有圆形的数据

function preload(){
  table = loadTable("assets/songs_normalize.csv", "csv", "header");
}

function setup() {
  createCanvas(3000, 3000);
  // 预处理所有数据，存入circles数组
  for (let r = 0; r < table.getRowCount(); r++) {
    const artist = table.getString(r, "artist");
    const song = table.getString(r, "song");
    const duration = table.getNum(r, "duration_ms");
    const year = table.getNum(r,"year");
    const tempo = table.getNum(r,"tempo");
    const energy = table.getNum(r,"energy");
    const popularity = table.getNum(r,"popularity");
    
    // 计算圆形的各项属性
    const y = map(year, 1998, 2020, 50, 2950);
    const x = map(tempo, 60, 211, 50, 2950);
    const size = map(duration, 0, 484146, 0, 100); 
    const colorVal = map(popularity, 0, 89, 0, 255);
    const opacity = map(energy, 0.05, 1, 0, 255);
    
    // 修复颜色负数问题，替换-Color为255-colorVal避免异常
    let circleColor = color(colorVal/2, 255 - colorVal, colorVal);
    circleColor.setAlpha(opacity);
    
    // 将当前圆形的所有数据存入数组
    circles.push({
      x, y, size, circleColor, artist, song
    });
  }
}

function draw() {
  background(133,124,222);
  noStroke();
  
  // 遍历所有圆形数据，逐个判断悬浮并绘制
  for (let circle of circles) {
    let dis = dist(mouseX, mouseY, circle.x, circle.y);
    
    if (dis < circle.size / 2) { // 用圆形半径判断悬浮，而非固定值5
      fill(0);
      circle(circle.x, circle.y, circle.size);
      // 绘制文本，可添加样式优化可读性
      fill(255);
      textSize(12);
      text(circle.artist, circle.x, circle.y - circle.size/2 - 10);
      text(circle.song, circle.x, circle.y - circle.size/2 + 5);
    } else {
      fill(circle.circleColor);
      circle(circle.x, circle.y, circle.size);
    }
  }
}

关键修改说明 #

1. 数据持久化：新增全局数组circles，将每行数据处理后的圆形属性统一存储，确保draw函数能访问到所有圆形的信息。
2. 绘制逻辑迁移：将所有绘制与交互判断移到draw()函数中，利用p5.js的draw循环实现实时悬浮效果。
3. 悬浮判断修正：用circle.size / 2作为悬浮判断的距离阈值，符合圆形的实际范围。
4. 颜色修复：将-color改为255 - colorVal，避免生成无效的负数值颜色。

内容的提问来源于stack exchange，提问作者rohrschacht rohr