我正在使用d3库创建时间轴。 它在父SVG元素中有很少的路径元素,如下所示:
<path d="M0,5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="translate(585,61)scale(0.8)" style="fill: rgb(0, 0, 0);"></path>
请注意,我使用d3的符号类型(三角形向下)来生成路径元素。
现在,这些元素与2个事件处理程序挂钩:mouseover和mouseout切换工具提示。
mouseover甚至可以正常工作。
但是,每次鼠标在path元素中移动时,mouseout事件都会被触发;当我移动鼠标时,工具提示会快速闪烁
我尝试过: - mouseleave事件,但它显示了相同的行为 我还增加了path元素的大小,以确保鼠标实际上没有移出元素
任何想法,我该如何解决?
我在这里创建了JSbin - http://jsbin.com/mivihiyi/13/edit 但是,我自己无法在那里重现它。但是,问题仍存在于我的软件中.. aaaaaaaaaaaaaa:(
这是我的代码:
g.each(function(d, i) {
d.forEach( function(datum, index){
var data = datum.times;
g.selectAll("svg").data(data).enter()
.append('path')
.attr("class", "point")
.attr("d", d3.svg.symbol().type("triangle-up"))
.attr("transform", function(d) { return "translate(" + getXPos(d, i) + "," + getStackPosition(d, i) + ")scale(2)"
})
.on({
mouseover: function(d)
{
tooltip.html('I am a tooltip');
tooltip.style("top", (d3.event.pageY - 40)+"px").style("left",(d3.event.pageX-15)+"px");
tooltip.style("visibility", "visible");
},
mouseleave: function(d) {
tooltip.style("visibility", "hidden");
}
});
我正在初始化顶部的工具提示,如下所示:
var tooltip = d3.select('#timeline1')
.append("div")
.attr("class", "timeline-tooltip")
.style("visibility", "hidden")
.text("Invalid Date");
这是我的css
.timeline-tooltip {
color: black;
font-size: x-small;
border-top-width: 5px;
border-top-color: rgb(149, 206, 254);
border-top-style: solid;
padding: 5px 10px 5px 10px;
text-transform: uppercase;
box-shadow: 2px 2px 2px rgba(105, 102, 102, 0.7);
position: fixed;
z-index: 10;
}
答案 0 :(得分:14)
以防万一其他人有这个问题,找到这个页面并像我一样愚蠢:我有相同的症状,但后来突然意识到我正在svg元素上绘制工具提示,我试图添加工具提示。最终结果:只要工具提示可见,就会触发mouseleave事件;这当然是完全合理的,因为鼠标刚刚离开底层的svg元素,因为它现在位于工具提示的顶部。
解决方案:确保工具提示的位置不会与鼠标重叠。
答案 1 :(得分:8)
答案 2 :(得分:0)
我今天刚遇到同样的问题,在谷歌搜索后我发现了这个问题。就我而言,问题是我在my上设置了以下CSS属性:
path { fill: none; }
这将导致鼠标过/关事件仅在路径笔划上触发, NOT 在路径区域内/外。要解决此问题,请将css更改为:
path { fill: transparent; }
这将设置鼠标事件的行为符合预期:进入区域时触发鼠标悬停,当离开区域时触发鼠标悬停。
看到这个小提琴: http://jsfiddle.net/xkya4cfp/1/