d3.js Zoomable Circle Packing-如何在缩放完成之前防止其他点击事件

Question

我有一个Zoomable Circle Packing Visual，其图案与 \Mike Bostock's version]几乎相同。但是，如果当前正在进行缩放，我希望能够阻止额外的点击触发缩放。

我觉得这应该很简单，但是我没有运气。我有一个标志，指示补间的开始，另一个指示补间的结束。我尝试在补间开始时将svg和所有节点（圆圈）的指针事件设置为“ none”，然后在补间结束时将它们重新设置为“ auto”，但这并没有改变行为。

Mike Bostock's version

所需结果：ZoomTo无法中断 实际结果：ZoomTo被额外的点击中断

Answer 1

我遵循您提到的相同方法。 Here是Mike Bostock的例子的分支

这是我们所做的：

创建一个名为zoomActive的变量并将其设置为false。

let zoomActive = false;

在SVG zoomActive事件中检查click的值以防止缩小：

  .on("click", () => {
      if(zoomActive === false) {
        zoom(root)
      }
    }
  );

在圈子zoomActive事件中检查click的值以防止缩小：

  .on("click", 
    (d) => {
      if(zoomActive === false) {
        focus !== d && (zoom(d), d3.event.stopPropagation())
      }
    }
  );

最后，在过渡开始和结束时更新值：

    .on('start', function() {
      zoomActive = true;
    })
    .on('end', function() {
      zoomActive = false;
    });