我有一个图表,我需要一个参考线,鼠标光标位于此图中.此参考线将跟随图形内的鼠标移动.
但这似乎没有用.它仅适用于轴和轴的刻度线(.轴线).在调试时,我发现鼠标事件在SVG上应用时工作正常但在组上没有,为什么呢？
这是我的代码:
<html>
<head>
<script src="jquery.js">
</script>
<script src="d3.v2.js">
</script>
<script src="retest.js">
</script>
<style type="text/css">
.g_main {
cursor:pointer;
}
.axis path, .axis line {
stroke: #DBDBDB;
/*shape-rendering: crispEdges;
*/
}
.y g:first-child text {
display:none;
}
.y g:first-child line {
stroke: #989898 ;
stroke-width: 2.5px;
}
/*.x g:first-child line {
stroke: black ;
stroke-width: 2.5px;
}
*/
.y path {
stroke: #989898 ;
stroke-width: 2.5px;
}
</style>
</head>
<body>
<center>
<button id="reload" onclick="loadViz();">
load Graph
</button>
<div id="viz" …我正在使用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事件,但它显示了相同的行为我也增加了路径元素的大小,以确保鼠标实际上没有移出元素
任何想法,我该如何解决？
我在这里创建了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");
}
});
我正在初始化顶部的工具提示,如下所示: …