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

Question

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

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

在我的场景中，svg 中有circles，如果双击 svg 它应该会放大，但是如果双击任何circle 元素，应禁用缩放。

我有一个选择

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

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

我想知道是否有任何方法可以检查条件，然后使用类似的方法禁用缩放 -

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

编辑

你可以在我重现问题的地方找到 fiddle - https://jsfiddle.net/bhnbhushan/dnzpyjx0/2/

Answer 1

我认为你有两个选择。您可以执行您建议的操作，即利用事件委托(delegate)检查 event.target 是否为 circle 元素。请注意，在 d3 中，您可能需要 Hook d3.event而是访问目标。

d3.zoom 还提供了一种使用 zoom.filter 进行过滤的方法同样，您可以传入您想要 Hook 的条件，即检查 d3.event.target 是否是一个圆。

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