Mouseover事件不适用于重叠对象

Question

我试图在d3创建的图形上创建鼠标悬停工具提示效果。圆圈在这条线上。我遇到的问题是，当鼠标实际上位于直线的位置时，工具提示消失了。有没有办法忽略背景线？

没有触发鼠标悬停，因为鼠标指向背景线：

鼠标悬停被触发： 我有一个像这样的on mouseover功能：

.on("mouseover", function(thisElement, index){
  //do something when it is selected
})

Answer 1

如果您不打算将线路路径用于任何其他事件，则解决此类问题的最直接方法是允许线路的鼠标事件传播。我们可以使用pointer-events CSS属性，并将其值设置为none。

您将其应用于您的JavaScript代码，

.style('pointer-events', 'none')

或通过CSS对其进行配置（不要因为封装而使用Angular之类的JavaScript框架，否则可能无法工作）

.line {
  pointer-events: none
}

Answer 2

您的line似乎位于circle的顶部。您可以使用z-index来更改堆叠顺序。

示例- 我已将mouseover事件附加到box1，并且box2的部分区域位于box1的顶部。

const div1 = document.querySelector('#box1');
div1.addEventListener('mouseover', function() {
    console.log('Triggering');
});

div {
    width: 100px;
    height: 100px;
}

#box1 {
    background-color: blueviolet;
    /* z-index: 2; */
    position: relative;
}

#box2 {
    background-color: red;
    position: relative;
    bottom: 50px;
    /* z-index: 1; */
}

<div id="box1">Box1</div>
<div id="box2">Box2</div>

将z-index中的box1设置为高于box2。

const div1 = document.querySelector('#box1');
div1.addEventListener('mouseover', function() {
    console.log('Triggering');
});

div {
    width: 100px;
    height: 100px;
}

#box1 {
    background-color: blueviolet;
    z-index: 2;
    position: relative;
}

#box2 {
    background-color: red;
    position: relative;
    bottom: 50px;
    z-index: 1;
}

<div id="box1">Box1</div>
<div id="box2">Box2</div>