onMouseOver事件不适用于画布/ d3（工具提示）

问题描述：

我正在使用画布和d3绘制〜130,000点的地图。我想要一个工具提示在地图的位置上显示数据。但是我没有看到工具提示和控制台日志。onMouseOver事件不适用于画布/ d3（工具提示）

我在亏损，任何帮助，将不胜感激:)

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(); 
}

没有控制台日志，那么它意味着它永远不会进入鼠标悬停功能。您确定要使用附加（“分数”）吗？ –

追加点工作得很好。它后来转化为画布弧。据我所知，最好的方法是使用XY值，但我不确定它有多精确。 –

你使用画布吗？我怀疑，因为“点”不是一个普通的HTML元素，这可能是原因...但我不知道 –

答

从与你讨论，我觉得帆布为基础编制的D3是不是与通常的鼠标事件的支持。我的信息来源：

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

引述重要组成部分：

如果你一直在关注，你可能会问自己现在 “怎么样的鼠标事件？”好决定。可悲的是，这种方法不允许我们使用精彩的事件监听器，我们通常可以将附加到选择并做出反应。我们可以做的最多的事情是将一个鼠标监听器附加到画布元素本身，获取指针的x坐标和y坐标，然后继续自己解决这个问题。

onMouseOver事件不适用于画布/ d3（工具提示）

相关推荐