Processing4中GPlot图表点悬停无法显示文本的技术求助

问题根源 #

GPlot的beginDraw()和endDraw()会创建独立绘图上下文，直接在draw循环里绘制文本会被GPlot的图层覆盖；GToolTip失效则是因为未正确绑定数据点的鼠标检测逻辑。

实现方案 #

1. 绑定数据到图表 #

必须调用plot1.setData(dataPoints)完成数据与图表的关联，否则无法正确转换数据坐标到屏幕坐标。

2. 添加鼠标悬停检测 #

在GPlot绘制完成后，遍历数据点，将数据坐标转为屏幕坐标，判断鼠标是否落在点的范围内。

3. 绘制悬浮文本 #

检测到悬停时，在鼠标位置偏移处绘制数据详情文本，避免遮挡数据点。

修改后的完整代码 #

import grafica.*;

GPlot plot1;
GPointsArray dataPoints;

void setup() {
  size(2000, 1300);
  createPlot();
}

void createPlot() {
  plot1 = new GPlot(this);
  plot1.setPos(0, 0);
  plot1.setDim(1500, 1000);
  plot1.getTitle().setText("MAP A");
  plot1.getXAxis().getAxisLabel().setText("Vehicle Weight (lbs)");
  plot1.getYAxis().getAxisLabel().setText("Acceleration time 0 to 60 (Sec)");
  plot1.setPointColor(color(0, 0, 0, 255));
  plot1.setPointSize(10);

  // 示例数据点
  dataPoints = new GPointsArray();
  dataPoints.add(1500, 5.0);  // 数据点1
  dataPoints.add(2000, 6.5);  // 数据点2
  dataPoints.add(2500, 4.2);  // 数据点3
  dataPoints.add(1800, 5.8);  // 数据点4

  // 绑定数据到图表，这一步是坐标转换的关键
  plot1.setData(dataPoints);
}

void draw() {
  background(255);
  plot1.beginDraw();
  plot1.drawBackground();
  plot1.drawBox();
  plot1.drawXAxis();
  plot1.drawYAxis();
  plot1.drawTitle();
  plot1.drawGridLines(GPlot.BOTH);
  plot1.drawPoints(); 
  plot1.endDraw();

  // 执行鼠标悬停检测与文本绘制
  checkMouseOver();
}

void checkMouseOver() {
  float pointSize = plot1.getPointSize();
  for (int i = 0; i < dataPoints.getSize(); i++) {
    // 将数据坐标转换为屏幕像素坐标
    float screenX = plot1.getXPixel(dataPoints.getX(i));
    float screenY = plot1.getYPixel(dataPoints.getY(i));

    // 判断鼠标是否在数据点范围内
    if (dist(mouseX, mouseY, screenX, screenY) <= pointSize/2) {
      // 设置文本样式
      fill(0);
      textSize(16);
      textAlign(LEFT, TOP);
      // 格式化显示文本，偏移鼠标位置避免遮挡
      String tooltipText = String.format("Weight: %.0flbs\nTime: %.1fsec", dataPoints.getX(i), dataPoints.getY(i));
      text(tooltipText, mouseX + 10, mouseY + 10);
      // 找到匹配点后退出循环，防止多个文本重叠
      break;
    }
  }
}

关键细节说明 #

• 文本绘制必须放在plot1.endDraw()之后，确保不会被GPlot的背景图层覆盖。
• 使用getXPixel()和getYPixel()完成数据空间到屏幕空间的坐标转换，保证悬停检测的准确性。
• 通过dist()函数计算鼠标与数据点的距离，结合点的半径判断是否触发悬停。

内容的提问来源于stack exchange，提问作者Elvis C.