使用p5.js在javascript中使用数据工具提示

Question

我正在尝试为使用p5.js制作的数据可视化制作工具提示，但我完全迷失了。我没有尝试过任何工作。这是我的代码。

＆＃13;

＆＃13;

 var table;
  var i;
  var j;
  var cellValue;
  var label;
  var test; 

  function preload() {
    matrix = loadTable("dataLayer2matrix.csv","csv")
    labels = loadTable("dataLayer2labels.csv","csv")
    test = matrix
  }
  
  function setup() {
    createCanvas(1500,1500)
    noStroke()
    fill(0,0,255,10)
 
   angleMode(DEGREES)
   background(255,255,255)
   matrixStartX = 200
   matrixStartY = 250
   var matrixRows = matrix.getRows()
   var matrixSize = matrixRows.length

   // Experiment with grid
   fill(75, 75, 75, 50)
   for (r = 0; r <= matrixSize; r++) {
   rect(matrixStartX , matrixStartY + r * 20 - 1 , 20 * matrixSize, 1)
   rect(matrixStartX + r * 20 - 1 , matrixStartY, 1, 20 * matrixSize)
   }
   
   // Draw matrix
   for (var mr = 0; mr < matrixSize; mr++) {
       for (var mc = 0; mc < matrixSize; mc++) {
         cellValue = matrixRows[mr].getNum(mc)
         fill(49,130,189,cellValue*10)
         rect(mc * 20 + matrixStartX, mr * 20 + matrixStartY, 19 ,19)
       }
   }
   
   // Labels - horizontal
   fill(75, 75, 75, 255)
   labelsRow = labels.getRows()
   for (mc = 0; mc < matrixSize; mc++) {
       label = labelsRow[0].getString(mc)
       text(label, 10, mc*20+matrixStartY + 15)
   }
   
   // Labels - vertical
   push()
   translate(matrixStartX + 15, matrixStartY - 15)
   rotate(-90)
   for (mc = 0; mc < matrixSize; mc++) {
       label = labelsRow[0].getString(mc)
       text(label, 0, mc*20)
       
   }
   pop()
   
   //Tooltip when clicked

       }
           /* if(mouseIsPressed){
                   fill(50);
                    text(cellValue, 10,10,70,80);
            }*/
    
       }
   }

＆＃13;

＆＃13;

＆＃13;

制作此图片：

我想要它，以便当我走过一个正方形时，我会得到数据。我真的无法做到这一点。感谢。

Answer 1

我认为告诉你使用bootstrap的建议遗漏了你正在使用p5.js的事实。 Bootstrap更多用于处理html组件，而不是内部处理草图。

相反，您可能只想用p5.js代码执行此操作。你能做的最好的事情就是把你的问题分解成更小的步骤：

第1步：你能画一个矩形吗？

如果您从一个只有一个矩形的简单示例草图开始，可能会更容易，而不是尝试将此新功能添加到现有草图中。

第2步：您能检测到鼠标何时进入该矩形吗？

如果您知道绘制矩形的位置，就会知道它的坐标。您还可以从mouseX和mouseY变量中了解鼠标的坐标。因此，要检测鼠标是否在矩形内，您只需使用if语句将鼠标的坐标与矩形的坐标进行比较。谷歌上有大量的资源，如果你在一张纸上画出一些例子，它可能会有所帮助。

另外，不要担心工具提示。只需做一些简单的事情，比如当鼠标在里面时改变矩形的颜色。

第3步：您能否显示信息框？

再次，首先在自己的草图中执行此操作。也许创建一个函数，将一个位置和您想要显示的信息作为参数显示，并将其显示在一个矩形中。不要担心它会成为工具提示。只是让它显示。使用硬编码值来获取信息。

第4步：您可以结合使用小示例草图吗？

当鼠标位于矩形内时，您会触发代码。您有用于绘制工具提示的代码。你可以这样做，以便当鼠标在矩形内时绘制工具提示吗？

第5步：只有当以上所有工作完成后，您才应该开始考虑将其添加到完整草图中。

您不必使用示例矩形，而是必须使用您在屏幕上绘制的矩形。不使用硬编码值调用工具提示函数，而是使用从正方形中获得的值。

一次拍摄一张，然后朝你的目标迈出一小步。然后，如果您遇到问题，可以发布MCVE您所执行的特定步骤。祝你好运！