d3.js v3和可縮放的可縮放樹狀圖示例

Question

我一直在嘗試在我創建的可視化中調整以下示例。

http://bl.ocks.org/PMeinshausen/5806106

我是因爲我的版本掙扎了很長一段時間，在「上點擊」放大沒有發揮作用。我最終發現這是因爲上面鏈接中的示例使用了d3 v2。如果您使用v3，則不再有效。所以當我在v2中替換時，我的代碼工作正常。

但是，我不能解釋爲什麼它不適用於版本3。我已經看過版本3的release notes，但它們不幫助我 - 可能是因爲我不理解它們足夠好。

但是，據我所知，問題不在於「點擊」事件綁定，例如，在此代碼中：

/* transition on child click */ 
     g.filter(function(d) { return d.children; }) 
      .classed("children", true) 
      .on("click", transition); 

這似乎是由於某些原因，當您使用d3 v3時d.children中的數據不存在。

任何人都可以解釋發生了什麼問題或者指出我需要改變的代碼部分的正確方向嗎？非常感謝。

Answer 1

我認爲在可縮放的樹形圖示例中的違規行是這一個：

.children(function(d, depth) { return depth ? null : d.children; }) 

嘗試用

.children(function(d) { return d.children; }) 

替換它我做了這一變化，並發現表現映像樹爲我所期望的它來。

根據d3 documentation，樹形圖佈局使用的層次佈局將children屬性添加到每個節點，其中包含該節點的所有子節點的數組。恰巧在本例中使用的JSON數據已經具有子節點數組的這種children屬性。

沒有提出我建議的更改，上面的違規行告訴d3，如果深度爲0，節點只有子節點。如果深度爲1或更大，則沒有子節點。級別0的唯一節點是傳遞給treemap.nodes()的匿名對象{children: d.children}。由於每個深度爲1或更大的節點顯然沒有子節點，因此d3會從這些節點中刪除children屬性。這會導致d.children處的數據丟失。

根據我提出的建議更改，d3會計算每個節點的子節點數組，並且在每種情況下都會匹配數據中的原始數組。所以這個孩子數組重新計算不會導致明顯的變化。

據我所知，d3版本2沒有以相同的方式計算和存儲節點的子節點數組，因此它不會打破它找到的任何預先存在的數組。因此，如果您使用的是d3樹形圖（或任何其他層次佈局），並且您的數據是使用包含子節點數組的名稱children進行構造的，那麼請小心如何告訴樹圖在數據中查找子節點。