D3.JS樹形圖不一致的縮放行為

Question

我正在嘗試使用d3.js樹形圖進行各種菜單。 它主要起作用，但我有一些我無法確定的故障。

基本上， 有時我的圖表不能正確縮放，而不是看到孩子們占據整個SVG區域，他們顯示“unzoomed”。

我懷疑它必須與動畫的時序有關，而某些數據操作則隱藏/顯示不同的節點，但實際上無法弄明白。 我認為可能會使行為變得棘手的其他事情與“父”和“子”節點都注冊的點擊事件有關。

我在JSBIN中有一個類似的示例設置。

所以，我想知道如何在縮放時注冊/取消注冊父/子節點中的點擊事件 - 如果這甚至是問題 - 並且還有更簡單或更少錯誤的方式來更改節點的可見性。

歡迎任何幫助！

Answer 1

嗯，這可能有點不正統，但我找到了解決這個問題的方法。

基本上，我只是在點擊不是來自當前縮放級別的節點時，而不是試圖弄亂事件注冊/取消注冊。

因此，在我的zoom功能中，我將縮放處理包裝在if檢查中：

function zoom(d) {

  if(node!=d){

    // the rest remains the same

  }
}

無論哪種方式，我仍然認為這是由於源元素發生的，因為點擊事件來自於SVG區域中的重疊 - 簡單地說，點擊事件是由幾個重疊元素觸發的，是第一個（最頂層）無意中觸發了SVG樹順序。

這是一個工作版本。

希望這有助於其他人！

編輯：這個解決方案並不完美。 現在有時點擊不會做任何事情 - 但它比直接用戶界面更好。 如果有人有其他想法，歡迎他們。