D3.js - 为什么鼠标悬停和鼠标输出为每个孩子元素？ [英] D3.js - why mouseover and mouse out fired for each child elements?

问题描述

我使用d3.js在圆圈中间生成带有文字标志的svg圆圈。
这是svg结果。

 < g id =main> 
< circle r =114fill =＃F0E8D0>< / circle> 
< text text-anchor =middle>电影标题< / text> 
< / g> 
  

这里是d3.js

  var circles = [{r：innerRadius}]; 
 svg.append（g）。attr（id，main）; 
 
 
 svg.select（＃main）。selectAll（circle）
 .data（circles）.enter（）
 .append ）
 .attr（r，function（d）{return dr}）
 .attr（fill，＃F0E8D0）; 
 
 svg.select（＃main）。append（text）
 .attr（text-anchor，middle）
 .text ）{returnThe movie title;}）; 
  

当鼠标悬停并离开圆形时，我还想启动一些动画。

  svg.select（＃main）
 .on（mouseover，function（）{
 //转换代码
}）。on（mouseout，function（）{
 // transition for transition 
}）
 因此问题是：
当鼠标移动到圆圈中时，动画会按照预期的方式触发，然而，当鼠标触摸文本元素时， mouseout事件触发（鼠标离开圆圈），然后再次发生mouseover事件（鼠标进入文本元素），这是不可取的。 
 
 
 
看起来当鼠标触摸< g>标签的任何子元素时，动画回调将被调用。
 
 
 
当鼠标触摸文本元素时，我不想要任何动画发生。 
解决方案
您可以阻止 text 元素通过将指针事件设置为无接收鼠标事件（从而触发mouseout事件触发） >：
  svg.select（＃main）append（text）
 .attr文本锚，中间）
 .attr（pointer-events，none）
 .text（function（）{returnThe movie title;}）; 
  
您可能还想在圆上设置事件而不是 g 元素：
  svg.select （#main）。selectAll（circle）
 .data（circles）.enter（）
 .append（circle）
 .attr（r，function d）{return dr}）
 .attr（fill，＃F0E8D0）
 .on（mouseover，function（）{
 // transition for transition 
}）
 .on（mouseout，function（）{
 // transition for transition 
}）
  
 
I use d3.js to generate a svg circle with a text logo in mid of the circle.
Here is the svg result.
<g id="main">
  <circle r="114" fill="#F0E8D0"></circle>
  <text text-anchor="middle">The movie title</text>
</g>


Here is the 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";});
I also want to fire some animations when mouse hover and leave the circle. 
svg.select("#main")
.on("mouseover",function(){
  //code for transition
}).on("mouseout",function(){
  //code for transition
})
So the problem is: 
  When mouse moves into the circle, the animation fires as expected, however, when mouse touches the text element, a mouseout event fires (mouse leaving the circle), followed by a mouseover event again (mouse entering the text element), which is not desirable. 

It seems that  the animation callbacks will be called when mouse touches any child element of the "< g >" tag.

I do not want any animation happen when mouse touches the text element. How can I do it?
解决方案
You can prevent the text element receiving mouse events (and thus a mouseout event triggering when you move the mouse over it) by setting pointer-events to none:
svg.select("#main").append("text")
   .attr("text-anchor", "middle")
   .attr("pointer-events", "none")
   .text(function(){ return "The movie title";});
You probably also want to set the events on the circle and not on the g element:
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
   })


                        
这篇关于D3.js  - 为什么鼠标悬停和鼠标输出为每个孩子元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！