如何使d3 zoomable treemap響應？

Question

我正在嘗試創建zoomable treemap example的響應版本。需要添加什麼才能使樹圖調整窗口大小？

當我嘗試在$(window).resize()的更新方法中更改treemap.size()時，似乎沒有任何事情發生。

我將svg設置爲style="width: 100%; height: 100%"並且svg調整大小，但是樹圖的佈局沒有。我也嘗試使用viewbox和preserveAspectRatioper this answer，並且樹圖看起來最初是正確的，但縮放功能不再正常工作，因爲treemap佈局不知道其正確的大小。

Answer 1

處理此問題的一種方法是Lars Kotthoff告訴您可以重新繪製樹形圖。

首先，您應該指定寬度和高度參數作爲圖形容器的寬度和高度，然後才能指定容器寬度和高度（百分比）。然後將可縮放的映射drwing腳本包裝到一個函數中（我們稱之爲zoomabletreemap（））

然後，您應該使用JavaScript爲window resize事件調用zoomabletreemap（）函數。在調用JavaScript之前，您還應該刪除舊圖。

$(window).resize(function() { 
      var div = document.getElementById("my-svg-div"); //id of the div we are appending to the chart container to contain the svg 
      div.parentNode.removeChild(div); 
      ZoomableTreeMap(); 
      }); 

Here is the working example爲同我上面