[Solved]-d3.on("mouseover") event does not work with nested SVG elements-d3.js

Had a very similar issue. Was being caused by me declaring the event listener twice EG:

.on('mousemove', function (event, d) {
// Mouse event stuffs 
}
.on('mousemove', function (event, d) {
// Mouse event stuffs again (overwrites above declaration).
}

Fixed by only declaring one listener function per event instead of two.

D3 will not warn you about being this stupid. So make sure you only are declaring each mouse related event listener once.

I also faced the same problems. I had the following code

svg.append("rect")
        .attr("fill",  "none")
        .attr("width", 20)
        .attr("height", 20)
        .on("mouseover", (event, data)=> { console.log(data)})
        .on("mouseout", (event, data)=> { console.log(data)});

where fill attribute is set to none. Once I removed fill attribute or set it to white, events started working as expected. So my new code looks like

svg.append("rect")
        .attr("fill",  "white")
        .attr("width", 20)
        .attr("height", 20)
        .on("mouseover", (event, data)=> { console.log(data)})
        .on("mouseout", (event, data)=> { console.log(data)})

I also face the same problems.
The solution is to add the css property to parent element

pointer-events: stroke;

or

pointer-events: visibleStroke;

Apart from using a rect element, it should have a CSS property set like this pointer-events: all; for the events to be triggered.

One approach is to add a rectangle filling the whole surface as the first element to catch mouse events that are not caught by elements added later:

something.append('svg:rect')
  .attr('width', width) // the whole width of g/svg
  .attr('height', height) // the whole heigh of g/svg
  .attr('fill', 'none')
  .attr('pointer-events', 'all')
  .on('mouseover', function() {
      // do something
    }     
  });

I believe the <g> element (mainGraph in your example) is just a container, not an actual shape that can receive mouse events.

You might be able to add the mouse event listener on the svg element itself, but I don't think the <g> will work.