在D3中添加一个工具提示到谷歌地图叠加

Adding a Tooltip in D3 to a Google Maps Overlay

本文关键字：工具提示 一个 谷歌地图 叠加 D3 添加      更新时间：2023-09-26

我目前正在尝试通过为每个标记添加工具提示来扩展这个示例http://bl.ocks.org/mbostock/899711。然而，我在这个过程中一直很不成功。我尝试了以下帖子中概述的程序:

http://bl.ocks.org/biovisualize/1016860

我尝试在原始示例中添加鼠标over和鼠标out侦听器，因为它们不起作用。对原始示例的修改如下:

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");
marker.append("svg:circle")
    .attr("r", 4.5)
    .attr("cx", padding)
    .attr("cy", padding)
    .on("mouseover", function(){console.log("mousover"); return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});;

谢谢你的帮助!

问题是元素的z-index。google地图被堆叠在svg元素之上。因此鼠标事件不能被注册

相关文章：