javascript - d3 circle packing 如何在两次单击同一节点时不缩小

Question

我有一个主要基于 Mike Bostock 的示例的可缩放圆形填充图 here .在他的例子中，如果你点击一个节点，它会放大，然后如果你再次点击同一个节点，它会缩小回到根级别。这种行为可以在他的例子中看到。我正在尝试更改示例，以便再次单击同一节点时，不会发生任何事情并且 View 保持不变。起初我什至无法弄清楚是什么导致了那种情况下的缩小，但我发现是这段代码:

d3.select("body")
  .style("background", color(-1))
  .on("click", function() { zoom(root); });

当第二次单击同一个节点时，将调用“单击”函数。但我不知道为什么。这是为 svg 背景着色的代码。当单击背景以缩小回到根级别时，它也会被调用，这是对代码应该做什么的明显解释。有谁知道为什么第二次单击同一个节点时会调用该代码？以及可能如何修改代码以仅在单击背景时才缩小？

Answer 1

我想通了这一点，并认为我会发布它以防它可以帮助任何人。似乎当您单击任何节点时，它也会在背景上注册为单击，但在他使用的示例中

d3.event.stopPropagation();

阻止在放大时实际调用后台点击功能。在点击任何节点后将该行添加到我的代码解决了我的问题。