Question

我有一组嵌套元素（SVG）。根元素是图形，子元素是图形中的元素（线，轴等）。简化示例：

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

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

我读到的一件事是后面的元素有优先权，所以我将.style（“pointer-events”，“none”）添加到所有子元素中，但这不起作用。

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属性，以便触发事件。

Answer 3

我也面临同样的问题解决方案是将css属性添加到父元素

pointer-events: stroke;

或

pointer-events: visibleStroke;

Answer 4

有一个非常相似的问题。是由我两次 EG 声明事件侦听器引起的：

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

通过只为每个事件声明一个监听器函数而不是两个来修复。

D3 不会警告你这么蠢。因此，请确保您只声明一次与鼠标相关的事件侦听器。

d3.on（“mouseover”）事件不适用于嵌套的SVG元素

4 个答案: