Я использую D3.js V5 для создания графа иерархического дерева.При нажатии определенного узла пользовательский интерфейс выполняет вызов API и извлекает все дочерние узлы.Требуется поместить узел, на который нажали, в центре элемента экрана / SVG вместе со всеми другими узлами в дереве.По сути, мне нужно переместить дерево так, чтобы узел, по которому щелкнули, появился в центре экрана.Я вычисляю центр элемента SVG и перевожу родительский элемент всех узлов (корень).Однако, я не совсем успешен.
Когда я впервые нажимаю на нижний элемент - Материаловедение, я могу переместить весьдерево такое, что этот узел появляется в центре элемента SVG.Когда я впоследствии нажимаю на верхний элемент - Энергия - из-за добавления новых дочерних элементов, высота родительского элемента (корня) увеличилась, и я не могу вычислить среднюю точку.Как видите, некоторые из дочерних элементов не отображаются внутри SVG и выглядят обрезанными.Пользователь может вручную перемещаться для просмотра этих элементов, но это не удовлетворяет требованию.Как я могу убедиться, что узел появляется в центре элемента SVG?Есть ли в библиотеке D3 функции для достижения этой цели?