score:1

Accepted answer

If you are not planning to use the line path for any other events, the most straightforward way when it comes to solving such issues would be to allow the mouse event of the line to propagate. We can make use the pointer-events CSS property, and set its value as none.

You apply it on your JavaScript code,

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

Or configure it via CSS (Do not that this may not work if you are working with JavaScript frameworks such as Angular, due to encapsulation)

.line {
  pointer-events: none
}

score:-1

It seems like your line is on top of circle. You can change the stack order by using z-index.

Example - I have attached the mouseover event to box1 and partial section of box2 is on top of 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>

Setting z-index of box1 higher than 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>


Related Query

More Query from same tag