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

引用重要部分：

如果你一直在关注，你现在可能会问自己 “鼠标事件怎么样？！”很好的电话。可悲的是，这种方法没有允许我们使用我们通常可以使用的精彩事件监听器附加到选择并作出反应。我们能做的最多就是附上一个鼠标监听器到canvas元素本身，得到x和y 指针的坐标并继续以某种方式解决我们自己。

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

1 个答案: