gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 01:35:53 25 4
gpt4 key购买 nike

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

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

enter image description here

这是 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 事件(鼠标离开圆圈),然后再次触发 mouseover 事件(鼠标进入文本元素),这不是可取的。

似乎当鼠标触摸“ ”标签的任何子元素时将调用动画回调。

我不希望鼠标触摸文本元素时出现任何动画。我该怎么做?

最佳答案

另一种解决方案是使用 mouseentermouseleave 而不是 mouseovermouseout

mouseentermouseover 类似,只是当指针(鼠标)从监听器(在本例中为圆圈)的后代物理空间之一移动时不会触发(在这种情况下是文本)到它自己的物理空间。

'mouseleave' 的相同推理

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

关于javascript - D3.js - 为什么为每个子元素触发鼠标悬停和鼠标移开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22444070/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com