javascript - 如何重置 svg 缩放并适合屏幕以获取具有不同方向的随机但大型 map /数据集

Question

我需要重新缩放 SVG 元素以适合屏幕，但由于数据集是随机的且具有不同的方向...我无法硬编码来缩放树形图以在最终用户放大/缩小后适应屏幕。

这是 d3 树形图的示例 - http://bl.ocks.org/robschmuecker/7880033

现在我可以使用鼠标缩放并将其移动到屏幕的正中间，如下图所示，并获取SCALE + TRANSLATE值，并将它们硬编码在重置按钮中...

但是我将拥有随机数据集，因此我无法对这些值进行硬编码，因为我无法预测 future 。

问题

如何使用代码计算出使用随机大型数据集生成的随机 d3 树形图的比例并转换值以拟合 + 比例 将 SVG > g 移动到父级“SVG”的中心

Answer 1

每次加载数据集时，您都可以使用 getBBox() 并将其转换如下:(我假设您很可能希望有一个固定的高度值并让宽度相应地 float )。

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+")")

	
}