将 D3 中的工具提示添加到 Google 地图叠加层答案

【问题标题】：Adding a Tooltip in D3 to a Google Maps Overlay将 D3 中的工具提示添加到 Google 地图叠加层
【发布时间】：2014-06-06 00:24:35
【问题描述】：

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

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

我尝试在原始示例中添加 mouseover 和 mouseout 侦听器，但它们不起作用。对原始示例的修改如下：

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

感谢您提供的任何帮助！

【问题讨论】：

试试 D3 tip 库
您找到解决方案了吗？请张贴。

标签： javascript d3.js

【解决方案1】：

问题在于元素的 z-index。谷歌地图堆叠在 svg 元素之上。因此无法注册鼠标事件。

【讨论】：