D3.js v5-分层树图-如何定位节点？

Question

我正在使用D3.js V5生成分层树图。单击特定节点后，UI会进行API调用并检索所有子节点。要求是将单击的节点与树中的所有其他节点一起放置在屏幕/ SVG元素的中心。基本上，我需要移动树，以便单击的节点出现在屏幕的中心。我正在计算SVG元素的中心并转换所有节点（根）的父元素。但是，我并不完全成功。

当我第一次单击底部元素-Materials Science时，我可以移动整个树，以使该节点出现在SVG元素的中心。当我随后单击顶部元素-能量-由于添加了新的子元素时，父元素（根）的高度增加了，并且我无法计算中点。如您所见，某些子元素没有出现在SVG内并且似乎已被切除。用户可以手动平移以查看这些元素，但这不满足要求。如何确保节点出现在SVG元素的中心？ D3库中是否有任何功能可以实现这一目标？