指针指着可以显示多个圆圈

src/index.js

@@ -321,30 +321,42 @@ export default class StockHeatmap extends React.Component {
     const x = mouse.x;
     const y = mouse.y;
 
-    // 移动事件处理
+    // 移动事件处理，指上圆球事件处理
+    let drawPending = []
     this.circles.forEach(circle => {
       const distance = Math.sqrt(Math.pow(x - circle.x, 2) + Math.pow(y - circle.y, 2));
       if (distance <= circle.radius) {
         let d = circle.data
+        drawPending.push(d)
+      }
+    });
+    if (drawPending.length > 0) {
+      const WIDTH = 100
+      const HEIGHT = drawPending.length * 45
+
+      // 绘制方块
+      let color = d3.color('#fff').rgb();
+      color.opacity = 0.7
+      this.drawingContext.fillStyle = color.toString();
+      this.drawingContext.fillRect(
+        x + 2,
+        y + 2,
+        WIDTH,
+        HEIGHT
+      );
+
+      // 绘制方块内数据
+      drawPending.map((d, index) => {
         let depth = d.marketDepth;
         let text = `${depth.side} ${depth.lastTradedQty} at ${depth.lastTradedPrice} `;
-
-        let color = d3.color('#fff').rgb();
-        color.opacity = 0.7
-        this.drawingContext.fillStyle = color.toString();
-        this.drawingContext.fillRect(
-          x + 2,
-          y + 2,
-          text.length * 10,
-          35
-        );
-
-        // 在这里执行更多的操作，如显示详情、更新数据等
         context.fillStyle = d3.color(depth.side == 'sell' ? '#222' : '#222').rgb();
-        context.fillText(`${d.ts}`, x + 5, y + 15);
-        context.fillText(text, x + 5, y + 30);
-      }
-    });
+        context.fillText(`${d.ts}`, x + 10, y + 7 + 15 + index * 45);
+        context.fillText(text, x + 10, y + 7 + 30 + index * 45);
+        if (index < drawPending.length - 1) {
+          context.fillText("--------------", x + 10, y + 7 + 45 + index * 45);
+        }
+      })
+    }
     //
     // // 清除canvas并重新绘制
     // context.clearRect(0, 0, canvas.width, canvas.height);