Javascript 在D3中，如何有条件地禁用双击缩放？

在D3.js中，您可以使用以下代码段禁用双击缩放

.on("dblclick.zoom", null);

在我的场景中，svg中有圆圈，如果双击svg，它应该放大，但是如果双击任何圆圈元素，则应该禁用放大

我有一个选择，那就是

d3.select('svg').selectAll('image').on('dblclick', () => {
  event.stopPropagation();
});

这是可行的，但我无法在当前设置中使用此选项

我想知道是否有任何方法，我可以检查一个条件，然后禁用像这样的东西缩放-

on("dblclick.zoom", () => {
  if (event.target.localName == 'circle') {
    // disable zoom
  } else {
    // enable zoom
  }
});

编辑

---

你可以在我重现我的问题的地方找到fiddle-

你为什么不用你的图像做同样的事情呢？您可以将自定义代码用于stopPropagation：

d3.select('svg').selectAll('circle').on('dblclick', () => {
  event.stopPropagation();
  // your code here
});

---

这将允许您利用所需的双击，而无需将双击传播到svg。

我认为您有两种选择。您可以按照建议执行操作，即利用事件委派检查event.target是否为圆形元素。请注意，在d3中，您可能需要挂接以访问目标

d3.zoom还提供了一种过滤方法，类似地，你们可以通过它来传递你们想要挂接的条件，即检查d3.event.target是否是一个圆

---

编辑：听起来您使用的是d3.v3，API中的d3.v3不支持处理这些用例。我强烈建议升级。

zoom.filter是最好的选择，但它在我的d3.js版本、3.5.17版本中不可用，并且事件委派不起作用，因为我正在使用React处理双击事件。哦，有趣的是，您介意发布完整代码或工作示例吗？会更容易帮助你好，我在这把小提琴里重现了我的问题-嘿看了看，到处玩。因此，需要注意的一点是，dblClick in React可能与D3事件不同步，因为您正在选择事件并通过D3选择器应用它，因此您同样需要使用D3选择圆SVG。然而，我认为更大的问题是，我可能错了，我不认为d3.v3提供了一种处理这个问题的方法？您可能需要升级：我继续使用D3重新编写事件侦听器，并在那里停止传播工作。它正在做我想做的，但我不知道我还打破了什么，回归测试后就会知道。无论如何，谢谢你的投入。