当鼠标移动到svg路径元素内时,mouseout/mouseleave会被触发

Question

当鼠标移动到svg路径元素内时,mouseout/mouseleave会被触发

Cut*_*nja 3 javascript jquery svg mouseevent d3.js

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

请注意,我使用d3的符号类型(三角形向下)来生成路径元素.

现在,这些元素与2个事件处理程序挂钩:mouseover和mouseout以切换工具提示.

mouseover甚至可以正常工作.

但是,每次鼠标在path元素中移动时,mouseout事件都会被触发; 当我移动鼠标时,工具提示会快速闪烁

我试过: - mouseleave事件,但它显示了相同的行为我也增加了路径元素的大小,以确保鼠标实际上没有移出元素

任何想法,我该如何解决？

我在这里创建了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");
        }
      });

Run Code Online (Sandbox Code Playgroud)

我正在初始化顶部的工具提示,如下所示:

 var tooltip = d3.select('#timeline1')
        .append("div")
        .attr("class", "timeline-tooltip")
        .style("visibility", "hidden")
        .text("Invalid Date");

Run Code Online (Sandbox Code Playgroud)

这是我的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;
}

Run Code Online (Sandbox Code Playgroud)