さまざまな向きのランダムであるが大きな地図/データセットに対してsvgスケーリングをリセットして画面に合わせる方法

Question

SVG要素を画面に合わせて再スケーリングする必要がありますが、データセットはランダムで異なる向きになるため...ハードコードできませんエンド・ユーザーのズームイン/ズームアウト後に画面に収まるようにツリー・チャートを拡大/縮小します。それらは、リセットボタン内http://bl.ocks.org/robschmuecker/7880033

今はマウスズームを使用して下図に示すように、画面のちょうど中間に移動することができ、SCALE + TRANSLATE値を取得し、そしてハードコード - ここ

はD3ツリーチャートの一例です...

http://image.prntscr.com/image/53445cbed28d4ba8b1ada61302225d55.png

しかし私は未来を予測することはできませんこれらの値としてハードコードすることはできませんので、私は、ランダムなデータセットを持つことになります。

質問

どうすればよい「SVG」親の中央にfit + scaleSVG > gにランダムに大きなデータセットを使用して生成されたランダムD3ツリーチャートの値を変換するスケールアウトコード数字を使用して

Answer 1

データセットがロードされるたびに、getBBox（）を使用して次のように変換することができます。（高さの値を固定し、それに応じて浮動小数点数を浮動小数点にすることが最も一般的です。

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

 
\t 
 
}