我使用d3.js来生成一个带有文字徽标的svg圈子.
这是svg的结果.
这是svg的结果.
<g id="main"> <circle r="114" fill="#F0E8D0"></circle> <text text-anchor="middle">The movie title</text> </g>
这是d3.js
var circles = [{r: innerRadius}];
svg.append("g").attr("id","main");
svg.select("#main").selectAll("circle")
.data(circles).enter()
.append("circle")
.attr("r",function(d){return d.r})
.attr("fill","#F0E8D0");
svg.select("#main").append("text")
.attr("text-anchor","middle")
.text(function(){ return "The movie title";});
当鼠标悬停并离开圈子时,我也想点火一些动画.
svg.select("#main")
.on("mouSEOver",function(){
//code for transition
}).on("mouSEOut",function(){
//code for transition
})
所以问题是：
当鼠标移动到圆圈中时,动画会按预期方式触发,但是当鼠标触摸文本元素时,mouSEOut事件会触发(鼠标离开圆圈),然后是鼠标悬停事件(鼠标进入文本元素),而不是合意.
看来,当鼠标触摸“< g>”的任何子元素时,将调用动画回调标签.
当鼠标触摸文本元素时,我不希望任何动画发生.我该怎么做？
解决方法
通过将指针事件设置为none,可以防止文本元素接收鼠标事件(从而在将鼠标移动到其上时触发mouSEOut事件)：
svg.select("#main").append("text")
.attr("text-anchor","middle")
.attr("pointer-events","none")
.text(function(){ return "The movie title";});
您可能还想在圆上设置事件,而不是在g元素上设置事件：
svg.select("#main").selectAll("circle")
.data(circles).enter()
.append("circle")
.attr("r",function(d){return d.r})
.attr("fill","#F0E8D0")
.on("mouSEOver",function(){
//code for transition
})
.on("mouSEOut",function(){
//code for transition
})
