D3.js mouseover无法使用重叠对象触发

在D3.js中，似乎在其他对象之前绘制的对象会使它们变得模糊，而鼠标悬停侦听器则看不见这些对象。有解决办法吗

看这个

d3.选择（“主体”）样式（“背景色”、“黑色”）；
var sampleSVG=d3.选择（“即”）
.append（“svg”）
.attr（“宽度”，400）
.attr（“高度”，200）；
sampleSVG.append（“圆”）
.样式（“填充”、“灰色”）
.样式（“笔划宽度”，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（“圆”）
.style（“笔划”、“黄色”）
.样式（“不透明度”，0.5）
.样式（“笔划宽度”，2）
.attr（“r”，100）
.attr（“cx”，250）
.attr（“cy”，100）

解决方案是在最后一个圆圈中添加“.style”（“指针事件”，“无”）；”：

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");

下面是一个工作示例

---

注意：如果较大的圆的“填充”属性设置为“无”，则示例也会按预期工作，而不需要将“指针事件”设置为“无”

这确实解决了我眼前的问题。但是10的好处是如何同时选择两个对象？我想一个解决方法可能是临时调用

.style（“指针事件”，“无”）

，并使用例如

each（）

进行监听，以在完成后重新激活，但希望有一个更优雅的解决方案。

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");