2

p5.j​​s を使用して作成したデータ ビジュアライゼーションのツールチップを作成しようとしていますが、完全に失われています。私が試したことは何もありません。これは私のコードです。

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

それはこのイメージを作ります:

正方形を超えると、その中にデータが取得されるようにしたいのです。本当に無理そうです。ありがとう。

4

1 に答える 1

5

ブートストラップを使用するようにというアドバイスには、p5.js を使用しているという事実が欠けていると思います。Bootstrap は、内部処理スケッチではなく、html コンポーネントを処理するためのものです。

代わりに、おそらく p5.js コードでこれを行いたいと思うでしょう。あなたができる最善のことは、問題をより小さなステップに分割することです。

ステップ 1:長方形を 1 つ描くことができますか?

この新しい機能を既存のスケッチに追加しようとする代わりに、長方形が 1 つだけある単純なサンプル スケッチから始める方が簡単かもしれません。

ステップ 2:マウスがその長方形の内側にあることを検出できますか?

四角形を描いている場所がわかれば、その座標がわかります。mouseXおよびmouseY変数からマウスの座標もわかります。したがって、マウスが四角形の内側にあるかどうかを検出するには、マウスの座標と四角形の座標を比較する if ステートメントを使用するだけです。これについては、Google にたくさんのリソースがあり、紙にいくつかの例を書き出すと役立つ場合があります。

また、まだツールチップについて心配する必要はありません。マウスが長方形の中にあるときに長方形の色を変更するなど、簡単なことをしてください。

ステップ 3:情報ボックスを表示できますか?

繰り返しますが、最初に独自のスケッチでこれを行います。たぶん、位置と表示したい情報をパラメーターとして取り、それを長方形に表示する関数を作成します。ツールチップにすることはまだ心配しないでください。表示させるだけです。情報にはハードコードされた値を使用してください。

ステップ 4:小さなサンプル スケッチを組み合わせてもらえますか?

マウスが長方形の内側にあるときにトリガーされるコードがあります。ツールチップを描画するコードがあります。マウスが長方形の内側にあるときにツールチップが描画されるようにすることはできますか?

ステップ 5:上記のすべてが機能する場合にのみ、完全なスケッチに追加することを検討する必要があります。

サンプルの四角形を使用する代わりに、画面上に描画している四角形を使用する必要があります。ツールチップ関数をハードコーディングされた値で呼び出す代わりに、正方形から取得した値を使用してください。

それらのピースを一度に 1 つずつ取り、目標に向かって小さな一歩を踏み出してください。その後、行き詰まった場合は、実行中の特定のステップのMCVEを投稿できます。幸運を！

于 2016-05-03T13:14:44.790 に答える