d3.on("mouseover")事件不适用于嵌套的SVG元素

Question

我有一组嵌套的元素(SVG).根元素是图形,子元素是图形中的元素(线,轴等).简化示例:

<g transform="translate(80,10)" id="mainGraph">
    <g class="Line">
        <path d="....."></path>
    </g>
</g>

我的问题是,如果我将mouseover/mousemove事件(例如D3.on("mouseover")绑定到mainGraph元素,它只会在我将鼠标移动到其中一个子元素上时触发.

我读到的其中一件事是后续元素的优先级,所以我将.style("指针事件","无")添加到所有子元素,但这不起作用.

Answer 1

一种方法是添加一个填充整个表面的矩形作为第一个元素来捕获未被稍后添加的元素捕获的鼠标事件:

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
    }     
  });

我相信<g>元素(示例中的mainGraph)只是一个容器,而不是可以接收鼠标事件的实际形状.

您可以在svg元素本身上添加鼠标事件监听器,但我认为它<g>不会起作用.

Answer 2

除了使用rect元素之外，它还应该pointer-events: all;为要触发的事件设置一个像这样的 CSS 属性。