使用 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 。 祝你好運！