如何重置 svg 縮放比例並適合具有不同方向的隨機但大型地圖/數據集的屏幕

Question

我需要重新縮放 SVG 元素以適應屏幕，但由於數據集將是隨機的且方向不同......我無法硬編碼以在最終用戶放大/縮小后縮放樹形圖以適應屏幕。

這是 d3 樹形圖的示例 - http://bl.ocks.org/robschmuecker/7880033

現在我可以使用鼠標縮放並將其移動到屏幕的正中間，如下圖所示，並獲得SCALE + TRANSLATE值，並在重置按鈕內對它們進行硬編碼...

但是我將擁有隨機數據集，因此我無法對這些值進行硬編碼，因為我無法預測未來。

題

我如何使用代碼計算出使用隨機大數據集生成的隨機 d3 樹圖的比例和轉換值，以fit + scale SVG > g到父“ SVG ”的中心

Answer 1

每次加載數據集時，您都可以使用 getBBox() 並按如下方式對其進行轉換：（我假設您很可能希望具有固定的高度值並讓寬度相應地浮動）。

 function fit() { var bb=myChartG.getBBox() var bbx=bb.x var bby=bb.y var bbw=bb.width var bbh=bb.height //---center of graph--- var cx=bbx+.5*bbw var cy=bby+.5*bbh //---create scale: ratio of desired width vs current width-- var width=390 //---desired width (or height) var scale=width/bbw //--if height use myHeight/bbh-- //---where to move it center of my pane--- var targetX=200 var targetY=200 //---move its center to target x,y --- var transX=(-cx)*scale + targetX var transY=(-cy)*scale + targetY myChartG.setAttribute("transform","translate("+transX+" "+transY+")scale("+scale+" "+scale+")") }