Question

我使用d3在svg元素上放置了一个点击监听器：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" id="a">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" id="b">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" id="c">
</svg>

使用Javascript：

d3.select('svg').on('click', function(d, i) {
  // Somehow console.log the ID of the circle clicked on (if any).
});

我想参考处理程序中点击的圈子（如果有的话）。但是，d3没有给我参考这个事件。我知道我可以在每个圈子上放置一个监听器，而不是依赖于事件冒泡到<svg>元素，但我不想这样做，因为我打算稍后动态添加更多的圈子而不是我想要小心地添加和删除听众。

Answer 1

来自D3.js documentation：

“要在侦听器中访问当前事件，请使用全局d3.event。

这使您可以访问与事件相关的所有内容，包括鼠标位置和事件源/目标（在d3.event中打印console.log()）。

获取ID：

d3.select('svg').on('click', function(d, i) {
    // Somehow console.log the ID of the circle clicked on (if any).
    console.log("Clicked ID: " + d3.event.target.id);
});

如果圈子堆叠在与示例相同的位置，则事件将被您添加的 last 圈捕获（除非您将其pointer-events CSS属性更改为{{ 1}}），因为之前的那些将被隐藏。

在高级听众中参考d3中的事件目标？

1 个答案: