如何与下面的元素进行交互？

Question

我遇到了一个问题，我无法与最近完全被其他元素覆盖的元素进行交互。以下是代码：

  

  
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>

无论在蓝色圆圈上委托哪个鼠标事件，您都无法收到任何响应，只是因为它被大红色圆圈完全覆盖。

最后我明白了将一个mousemove事件委托给“g”元素（圆圈的父节点）并检测哪个圆圈是最接近的一个，然后做一些事情。所以我的问题是，有没有聪明的方法来与下面的元素进行交互？