gpt4 book ai didi

D3.js 鼠标悬停无法触发重叠对象

转载 作者:行者123 更新时间:2023-12-02 09:06:18 26 4
gpt4 key购买 nike

在 D3.js 中,似乎在其他对象之前绘制的对象然后遮盖它们对于鼠标悬停监听器来说变得不可见。有解决办法吗?

查看此working example .

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="scripts/d3.v3.js"></script>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">

d3.select("body").style("background-color", "black");

var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 400)
.attr("height", 200);

sampleSVG.append("circle")
.style("fill", "grey")
.style("stroke-width", 2)
.attr("r", 60)
.attr("cx", 150)
.attr("cy", 100)
.on("mouseover", function(){d3.select(this).style("fill", "red");})
.on("mouseout", function(){d3.select(this).style("fill", "grey");});

sampleSVG.append("circle")
.style("stroke", "yellow")
.style("opacity", 0.5)
.style("stroke-width", 2)
.attr("r", 100)
.attr("cx", 250)
.attr("cy", 100)

</script>
</body>
</html>

最佳答案

解决办法是添加 ".style("pointer-events", "none");"对于最后一个圆:

sampleSVG.append("circle")
.style("stroke", "yellow")
.style("opacity", 0.5)
.style("stroke-width", 2)
.attr("r", 100)
.attr("cx", 250)
.attr("cy", 100)
.style("pointer-events", "none");

这是一个工作示例 http://tributary.io/inlet/5215694

注意:如果较大的圆的填充属性设置为“无”,则该示例也可以按预期工作,而无需将“指针事件”设置为“无”。

关于D3.js 鼠标悬停无法触发重叠对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15554908/

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