onMouseOver事件在畫布/ d3上不起作用（工具提示）

Question

我正在使用canvas和d3繪制〜130,000點的地圖。 我想要一個工具提示來顯示地圖位置上的數據。 但是我看不到工具提示或控制台日志。

我很茫然，任何幫助將不勝感激:)

function createMap(dataset) {

  var dataBinding = locations.selectAll("points.arc")
    .data(dataset)

        .enter()
      .append("points")
      .classed("arc", true)
      .attr("x", function(d) {return projection([d.y,d.x])[0]})
      .attr("y", function(d) {return projection([d.y,d.x])[1]})
      .attr("radius", 1)
      .attr("fillStyle", "rgba(250, 80, 80, 1)")
      //onmouse over
      .on("mouseover", function(d) {
        console.log("mouse over");
        div.transition()        
            .duration(200)
            .style("opacity", .9);      
        div .html(d.y + "<br/>"  + d.x) 
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");

        })              
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);
        });

  drawCanvas();
}

Answer 1

通過與您的討論，我認為通常的鼠標事件不支持d3的基於畫布的繪圖。 我的信息來源：

https://bocoup.com/blog/d3js-and-canvas

引用重要的部分：

如果您一直在關注，那么您現在可能會問自己“鼠標事件怎么樣？！”的好消息。 可悲的是，這種方法不允許我們使用通常可以附加到選擇並做出反應的精彩的on事件偵聽器。 我們能做的就是將鼠標偵聽器附加到canvas元素本身，獲取指針的x和y坐標，然后自行解決該問題。