9

我有一组嵌套的元素（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") 添加到所有子元素中，但这不起作用。

4

4 回答 4

14

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

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>不会起作用。

于 2013-07-05T19:06:46.593 回答
6

除了使用rect元素之外，它还应该有一个这样的 CSS 属性集pointer-events: all;，以便触发事件。

于 2016-05-14T01:00:58.610 回答
1

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

pointer-events: stroke;

或者

pointer-events: visibleStroke;
于 2017-12-08T11:13:35.773 回答
0

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

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

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

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

于 2021-03-31T00:56:11.137 回答