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

Question

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

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

在我的情况下，circles中有svg，如果您双击svg，它将放大，但是如果您双击任何{{1} }元素，则应禁用缩放。

我有一个选择

circle

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

我想知道是否有什么方法可以检查条件，然后禁用类似这样的缩放功能-

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

编辑

您可以在我重现问题的地方找到小提琴-https://jsfiddle.net/bhnbhushan/dnzpyjx0/2/

Answer 1

我认为您有两种选择。如果event.target是circle元素，您可以建议使用事件委托检查。请注意，在d3中，您可能需要钩住d3.event才能访问target。

d3.zoom还提供了一种使用zoom.filter进行过滤的方法，您可以通过类似的方式传入要挂接的条件，即检查d3.event.target是否为circle。

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

Answer 2

为什么不对图像进行相同的处理？您可以在stopPropagation中使用自定义代码：

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

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