score:1

Accepted answer

The problem is that the style attributes are not valid for the svg element.
Try...

feature.on("mouseover", mouse_over);
function mouse_over(d) {
    d3.select(this) 
        .transition()
        .duration(500)
        .style("fill", "lightBlue")
        .style("stroke", "white");
      }

Or...

feature.on("mouseover", mouse_over);
function mouse_over(d) {
    d3.select(this) 
        .transition()
        .duration(500)
        .style({fill: "lightBlue", stroke: "white"});
      }  

Or...

feature.on("mouseover", mouse_over);
function mouse_over(d) {
    d3.select(this) 
        .transition()
        .duration(500)
        .attr({fill: "lightBlue", stroke: "white"});
      }  

score:3

If you are using leaflet 1.0, I think the reason is that leaflet has set "pointer-event" as "none": Figure showing SVG within leaflet

which makes the click event cannot be fired. So the solution is quite simple, just set "pointer-event" as "all" by using css, then it works! I have tried it by using leaflet 1.0.

pointer-events: pointer-events description


Related Query