Изменение размера d3/dagre-d3 svg для отображения всего содержимого

Question

Я пытаюсь создать DAG с dagre-d3. Данные для этих DAG поступают из базы данных, различаются для каждой группы DAG и как таковая, я не знаю ширины/высоты, чтобы предоставить содержащую svg перед добавлением всех узлов и ребер в график.

В идеале я бы назвал что-то вроде d3.select("#svg1").resize_to_match_contents() после добавления всех узлов и ребер, чтобы убедиться, что все узлы видны, а svg не слишком велик. Конечно, такой функции нет, и я понятия не имею, как ее реализовать. Я знаю, что я могу позвонить d3.select("#svg1").attr("height", "10"), чтобы установить высоту, но понятия не имею, как получить/вычислить, какова высота элемента <g> внутри SVG.

Answer 1

Внутренние и внешние размеры SVG могут независимо управляться с использованием атрибута viewBox. Когда вы говорите о поиске размера g, это имеет смысл только там, где нет viewBox, и нет других шкалы преобразования в любом месте.

Вот как я хотел бы предложить вам сделать это:

1. Установите width/height от svg элемента к window.innerWidth и window.innerHeight, или к максимальному размеру вы хотите, чтобы расти к.
2. Установите атрибут viewBox на что-то вроде "0 0 100 100", а затем определите все масштабы в вашем коде, чтобы иметь домен [0, 100]. Это гарантирует, что график сжимает, чтобы поместиться в вашей выделенной области.

Кроме того, обратите внимание на то, как nvd3 handles window resizes, и как поддерживать систему координат внутри элемента SVG при изменении размера с помощью preserveAspectRatio.

---

Из того, что я мог бы извлечь из их веб-страницы, darge-d3 не допускает установки параметров макета, чтобы ограничить размер визуализации в явном виде и не возвращает максимальные размеры его использовать. Можно, однако, использовать getBBox(), чтобы получить размеры g коробки, где вынесенной и попытаться установить viewBox таким образом, что она просто соответствует SVG (или установите height, width на SVG, чтобы соответствовать измерению для g 1: 1, но это может привести к сломанной компоновке.