Javascript D3.js mouseover事件也应到达圆圈的内部区域

我的页面上有下面的圆圈

container.append("circle")
    .style("stroke", "red")
    .style("stroke-width", 2)
    .style("fill", "none")
        .attr("cx", x)
        .attr("cy", y)
        .attr("r", 10);

和下面的事件侦听器

svg.selectAll("circle")         
    .on("mouseover", function(d) {
        console.log("mouse over");  
    })                  
    .on("mouseout", function(d) {       
        console.log("mouse out");
    });

鼠标悬停事件在指针位于红色圆圈线上时触发，鼠标悬停事件在指针离开红色圆圈线时触发

---

我如何制作一个事件监听器，当鼠标指针经过红色的圆圈线和圆圈内的白色区域时触发它？不仅仅是红线。现在，当指针位于红线内（红色圆圈内的白色区域）时，将触发“鼠标移出”事件。它应该只在指针超出圆圈时触发

使用透明的

代替填充
none


var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var circle=svg.append（“circle”）
.attr（“r”，50）
.attr（“cx”，60）
.attr（“cy”，60）
.style（“填充”、“透明”）//将填充：无更改为填充：透明
.style（“笔划”、“红色”）
.样式（“笔划宽度”、“2”）；
circle.on（“mouseover”，function（））{
控制台日志（“鼠标悬停”）；
});      
在“mouseout”，函数（）中循环{
控制台日志（“鼠标输出”）；
});
除了Gilsha提出的建议之外，您可以坚持
填充：无
并使用CSS属性将其设置为可见

可见

仅SVG。在以下情况下，元素可以是鼠标事件的目标：
“可见性”属性设置为“可见”，并且鼠标光标位于上方
其内部（即填充）或周长（即冲程）
元素。填充和笔划的值不影响事件
处理

只要鼠标指针悬停在笔划或内部填充上，以下示例将以蓝色渲染圆的笔划


d3.选择（“主体”）
.append（“svg”）
艾特先生({
“宽度”：200，
“高度”：200
})
.附加（“圆圈”）
艾特先生({
“cx”：100，
“cy”：100，
“r”：50
})
.风格({
“填充”：“无”，
“笔划”：“红色”，
“笔划宽度”：“20”，
“指针事件”：“可见”//我希望您需要一个内径为零的辅助圆来实际接收事件。您首先使用了什么代码来创建该圆？使用更多的代码应该更容易帮助：-）我添加了实现该圆的代码。