Как сбросить масштаб svg и поместиться на экран для случайных, но больших карт/наборов данных с различными ориентациями

Question

Мне нужно перемасштабировать элементы SVG для соответствия экранам, но поскольку наборы данных будут случайными и различной ориентации ... Я не могу жестко кодировать чтобы масштабировать древовидную диаграмму, чтобы вставить ее в экран после увеличения/выключения пользователя.

Вот пример d3 дерева графика - http://bl.ocks.org/robschmuecker/7880033

Теперь я могу с помощью трансфокации мыши и переместить его в точно середине экрана, как показано на картинке ниже, и получить SCALE + TRANSLATE значения, и жесткий код их в кнопку сброса ...

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

НО я буду иметь случайные наборы данных, так что я не могу жестко закодировать эти значения, как я не могу предсказать будущее.

Вопрос

Как я могу используя код фигуры из масштаба и перевести значение дерева диаграммы случайных d3 генерируется с использованием случайных большого набора данных для fit + scaleSVG > g к центру родителя «SVG»

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 
 
}