当窗口中有滚动时,d3.js中的工具提示位置停止运行

时间:2018-04-05 05:04:54

标签: javascript d3.js

我见过很多例子:

.on('mouseover',function(d,i){   
    div.style("left", (d3.event.pageX) + "px")
        .style("top", ((d3.event.pageY - 28 ))+ "px");

他们设法在光标的确切位置找到一个div。这在我的情况下运作良好。但是当我向下移动页面滚动时,这会停止工作。但如果我将滚动条返回到原始位置,它会再次起作用。我该如何解决? 这是我的一段代码:

circles.on('mouseover',function(d,i){   
    div.style("left", (d3.event.pageX) + "px")
        .style("top", ((d3.event.pageY - 28 ))+ "px");
    div.style("display","block");
})

CSS:

div.tooltip {   
 position: absolute;            
 text-align: center;            
 width: 60px;                   
 height: 28px;                  
 padding: 2px;              
 font: 12px sans-serif;     
 background: lightsteelblue;    
 border: 0px;       
 border-radius: 8px;            
 pointer-events: none;          
}

enter image description here

0 个答案:

没有答案