javascript - How to interact with element underneath? -

i come across problem can't interacte elements covered other elements recently. here below code:

          var data = [ [40, "blue"], [80, "red"] ];    var g = d3.select("#container").append("svg")    .attr({      width: 300,      height: 300,    })    .style("border", "1px solid #ccc")    .append("g")    .attr("transform", "translate(150,150)");    g.selectall("circle").data(data)    .enter()    .append("circle")    .attr({      r: function(d){ return d[0]; },      fill: function(d){ return d[1]; },      "fill-opacity": 0.5    })    .on("mouseenter", onmouseenter)    .on("mouseleave", onmouseleave)    .on("mousemove",  onmousemove)    .on("mouseover",  onmouseover)    .on("mouseout",   onmouseout);    function onmouseenter(d){    console.log(d[1] + ": mouse enter");  }  function onmouseleave(d){    console.log(d[1] + ": mouse leave");  }  function onmousemove(d){    console.log(d[1] + ": mouse move");  }  function onmouseover(d){    console.log(d[1] + ": mouse over");  }  function onmouseout(d){    console.log(d[1] + ": mouse out");  }    

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>    <div id="container"></div>

no matter mouse events delegated on blue circle, can't receive responds, because covered big red circle.

finally idea delegating mousemove event on "g" element(circles' parent node) , dectecting circle closest one, something. question is there smart way interate elements underneath?