我目前正尝试通过为每个标记添加工具提示来扩展此示例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");});;
感谢您提供任何帮助!
答案 0 :(得分:0)
问题是元素的z-index。谷歌地图堆叠在svg元素的顶部。因此无法注册鼠标事件。