javascript D3.js - 为什么鼠标悬停和鼠标移出为每个子元素触发？

D3.js - why mouseover and mouse out fired for each child elements?

提问by GingerJim

I use d3.js to generate a svg circle with a text logo in mid of the circle. Here is the svg result.

我使用 d3.js 生成一个 svg 圆圈，圆圈中间有一个文本标志。这是 svg 结果。

<g id="main">
  <circle r="114" fill="#F0E8D0"></circle>
  <text text-anchor="middle">The movie title</text>
</g>

Here is the d3.js

这是 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.

所以问题是：当鼠标移入圆圈时，动画按预期触发，但是，当鼠标触摸文本元素时，会触发 mouseout 事件（鼠标离开圆圈），然后再次触发 mouseover 事件（鼠标进入文本元素） )，这是不可取的。

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

当鼠标触摸“< g >”标签的任何子元素时，似乎会调用动画回调。

I do not want any animation happen when mouse touches the text element. How can I do it?

我不希望鼠标触摸文本元素时发生任何动画。我该怎么做？

回答by Avi Dubey

An alternate solution is to use mouseenterand mouseleaveinstead of mouseoverand mouseout.

另一种解决方案是使用mouseenterandmouseleave代替mouseoverand mouseout。

mouseenteris similar to mouseoverexcept that it is not triggered when the pointer (mouse) is moved from one of listener's (circle in this case) descendants' physical space (text in this case) to its own physical space.

mouseenter类似于，mouseover除了当指针（鼠标）从听者之一（在这种情况下为圆圈）后代的物理空间（在这种情况下为文本）移动到其自己的物理空间时不会触发它。

Same reasoning for 'mouseleave'

'mouseleave'的相同推理

Source: https://developer.mozilla.org/en-US/docs/Web/Events/mouseenterand https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave

来源：https: //developer.mozilla.org/en-US/docs/Web/Events/mouseenter和https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave

回答by Lars Kotthoff

You can prevent the textelement receiving mouse events (and thus a mouseout event triggering when you move the mouse over it) by setting pointer-eventsto none:

您可以text通过设置pointer-events为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 circleand not on the gelement:

您可能还想circle在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
   })