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

Question

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

 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); }*/ } }

它使这个图像：

我想要它，这样当我经过一个正方形时，我就能得到其中的数据。 我似乎真的做不到。 谢谢。

Answer 1

我认为告诉您使用引导程序的建议忽略了您正在使用 p5.js 的事实。 Bootstrap 更多用于处理 html 组件，而不是内部处理草图。

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

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

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

第 2 步：您能检测到鼠标何时位于该矩形内吗？

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

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

第 3 步：您可以显示信息框吗？

同样，首先在它自己的草图中这样做。 也许创建一个函数，它接受一个位置和你想要显示的信息作为参数并将其显示在一个矩形中。 不要担心让它成为工具提示。 让它显示出来。 对信息使用硬编码值。

第 4 步：你能结合你的小例子草图吗？

您有当鼠标位于矩形内时触发的代码。 您有绘制工具提示的代码。 当鼠标位于矩形内时，您可以绘制工具提示吗？

第 5 步：只有当上述所有内容都有效时，您才应该开始考虑将其添加到您的完整草图中。

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

一次接一个，朝着你的目标迈出一小步。 然后，如果您遇到困难，可以发布您正在进行的特定步骤的MCVE 。 祝你好运！