d3 Повторно центрировать группу элементов в SVG

Question

У меня есть SVG, который выглядит следующим образом:

Это в основном сетевая диаграмма, состоящая из узлов и ссылок, которая имеет возможность панорамирования имасштабирования.Допустим, я случайно перетащил всю группу за пределы экрана.Каков наилучший способ для меня перецентрировать мою группу, чтобы я мог видеть ее снова?

Я пытался выполнить преобразование и изменил значение масштаба, но все равно будет вне поля зрения.

 this.zoomTrans.scale = this.zoomTrans.scale - .1;
  this.container.attr('transform', 'translate(' + this.zoomTrans.x + ',' + this.zoomTrans.y + ') scale(' + this.zoomTrans.scale + ')');

Answer 1

В большинстве ситуаций d3 генерирует точки, начиная с начала координат (0, 0), что также очевидно является переводом по умолчанию.Возвращаясь к (0, 0), вы должны вернуться к видимой части вашего графика.

Чтобы действительно центрировать ваш график, вам нужно вычислить центральную точку, что обычно делается путем вычисления minX,maxX, minY и maxY из ваших точек, а затем вычисление (minX + maxX) / 2 и (minY + maxY) / 2 и центрирование этой точки в вашем окне.

Более сложное решение - отслеживать перевод и ограничивать еготаким образом, что график никогда не выйдет за пределы экрана.Опять же, вам нужны минимальное и максимальное значения для ваших координат.Минимальный горизонтальный перевод равен -maxX, а максимальный горизонтальный перевод - windowWidth + minX.Если зум не равен 1, это означает только правильное умножение границ с помощью зума.