Javascript D3.JS树映射不一致的缩放行为

我正在尝试使用d3.js树形图进行菜单排序。它基本上是有效的，但我有一些我不能确定的小故障

基本上，有时我的图表无法正确缩放，而不是看到孩子们占据整个SVG区域，而是显示为“未缩放”

我怀疑这一定与动画的计时有关，与隐藏/显示不同节点的一些数据操作有关，但实际上无法理解。我认为另一件事可能会导致该行为与“父”节点和“子”节点同时注册的点击事件有关

我在中有一个类似的示例设置

因此，我想知道如何在zoom上注册/注销父/子节点中的单击事件（如果这是问题所在的话），以及是否有更简单或更不容易出错的方法来更改节点的可见性

---

欢迎任何帮助

嗯，这可能有点不合常规，但我找到了克服这个问题的方法

基本上，我没有尝试去注册/取消注册事件，我只是在点击不是来自当前缩放级别的节点时才运行缩放

因此，在我的

zoom

函数中，我将缩放处理包装在

if

检查中：

function zoom(d) {

  if(node!=d){

    // the rest remains the same

  }
}

不管是哪种方式，我仍然认为这是由于源元素（单击事件来自SVG区域中的重叠）导致的——简单地说，单击事件是由几个重叠元素触发的，是SVG树顺序中第一个（最上面的）意外触发的

这是一个有效的版本

希望这对其他人有帮助

---

编辑：不过，这个解决方案并不完美。现在，有时候点击什么也做不了——但这比破坏用户界面要好。如果有人有其他想法，我们欢迎。

好吧，这可能有点不正统，但我找到了克服这个问题的方法

基本上，我没有尝试去注册/取消注册事件，我只是在点击不是来自当前缩放级别的节点时才运行缩放

因此，在我的

zoom

函数中，我将缩放处理包装在

if

检查中：

function zoom(d) {

  if(node!=d){

    // the rest remains the same

  }
}

不管是哪种方式，我仍然认为这是由于源元素（单击事件来自SVG区域中的重叠）导致的——简单地说，单击事件是由几个重叠元素触发的，是SVG树顺序中第一个（最上面的）意外触发的

这是一个有效的版本

希望这对其他人有帮助

---

编辑：不过，这个解决方案并不完美。现在，有时候点击什么也做不了——但这比破坏用户界面要好。如果有人有其他想法，欢迎提出。

我对这个问题不是很了解。我点击食物图标，然后点击“街头食物”，然后缩放恢复到根。这就是你所说的行为吗？@jprivillaso不。。。我所说的不良行为有时会发生在你点击一个矩形（但不是图标）的时候。我想我复制了这个错误。是不是当你在框中快速点击时，所有节点都显示在同一级别？是的，它们显示在同一级别，但我认为这与你点击的速度无关。我相信这与子节点和父节点同时注册的点击事件有关。在

clickedG

功能中，如果你

console.log（d.name）

，你会看到，即使你点击父节点图标，它下面的

d

也是调用

.on（“click”，clickedG）

。。。这就是为什么我认为注册/取消注册点击事件是解决这个问题的方法…我不太理解这个问题。我点击食物图标，然后点击“街头食物”，然后缩放恢复到根。这就是你所说的行为吗？@jprivillaso不。。。我所说的不良行为有时会发生在你点击一个矩形（但不是图标）的时候。我想我复制了这个错误。是不是当你在框中快速点击时，所有节点都显示在同一级别？是的，它们显示在同一级别，但我认为这与你点击的速度无关。我相信这与子节点和父节点同时注册的点击事件有关。在

clickedG

功能中，如果你

console.log（d.name）

，你会看到，即使你点击父节点图标，它下面的

d

也是调用

.on（“click”，clickedG）

。。。这就是为什么我相信注册/取消注册点击事件是解决这个问题的方法。。。