D3 V6可折叠垂直树缩放异常：滚动条显示时X轴平移错误

我使用D3 V6开发带有缩放功能的可折叠垂直树，遇到一个问题：当滚动条显示时，缩放功能无法正常工作，无滚动条时缩放则完全正常。

现有实现逻辑 #

每次树折叠或展开时，我会计算树的宽高，更新svg的height、width属性及viewBox，以此控制滚动条的显示与隐藏（当树尺寸小于容器div#d3tree时隐藏滚动条）：

let height = Math.max(finalOpts.height, (bottom.y - top.y) + finalOpts.rectHeight),
    width = Math.max(finalOpts.width, (right.x - left.x) + finalOpts.rectWidth);

svg.attr("height", height)
    .attr("width", width)
    .attr("viewBox", [0, 0, width, height]);

同时，我会根据树的尺寸调整内部g元素的位置：当树尺寸小于容器时，将g元素平移至容器中心；否则，根据树最左侧节点的x属性计算平移位置，确保滚动时整棵树可见：

// 确保滚动时整棵树可见
g.attr('transform',`translate(${(width > finalOpts.width) ? Math.abs(left.x) + (finalOpts.rectWidth / 2) : width / 2}, 0)`);

问题核心 #

上述功能均已实现，但当滚动条显示时，X轴缩放无法正确平移。我现在纠结于缩放代码中zoomTranslateX变量应设置的值（以下代码已注释，取消注释可启用缩放功能）：

// ZoomTranslate
//var zoomTranslateX = 0
//zoomBehaviours.translateTo(svg, (width > finalOpts.width) ? zoomTranslateX : 0, (target.getBoundingClientRect().height / 2) - 5);
//svg.call(zoomBehaviours);

作为D3.js新手，我想知道自己遗漏了什么或哪里出错了？

更新 #

我已找到一个解决方案：移除对g元素的平移操作，正确计算zoomTranslateX后，g元素可正确平移，缩放功能恢复正常。代码如下：

let moveToRight = (Math.abs(left.x) + finalOpts.rectWidth / 2 > width / 2) ? true : false,
    moveToLeft = (right.x + finalOpts.rectWidth / 2 > width / 2) ? true : false,
    zoomTranslateX = 0;

if(width > finalOpts.width) {
    zoomTranslateX = (moveToRight) ? - ((width / 2) - Math.abs(left.x) - (finalOpts.rectWidth / 2)) : (moveToLeft) ? ((width / 2) - Math.abs(left.x) - (finalOpts.rectWidth / 2)) : 0;
} else {
     zoomTranslateX = (moveToRight) ? - (((width / 2) - right.x) - (finalOpts.rectWidth / 2) - (Math.abs(left.x) - width / 2)) / 2 : (moveToLeft) ? (((width / 2) - Math.abs(left.x)) - finalOpts.rectWidth / 2) - (right.x - width / 2)) / 2 : 0;
}

zoomBehaviours.translateTo(svg, zoomTranslateX, (height / 2) - 5);

但我认为这个处理方法过于繁琐，希望找到更简便的实现方式。

内容的提问来源于stack exchange，提问作者Dharshinipriya