如何在d3条形图中集中条形？

Question

我在示例Angular项目中使用D3条形图。我的要求是将条形图中的所有条形居中，默认情况下保持对齐。我刚刚看到CSS属性transform，将其应用于<g>内的<svg>时，会将条形图整体移到几乎居中的位置，而不是精确的居中位置。以下是图表的代码。

<svg width="800" height="400">
     <g transform="translate()40,20">
            <g class="x-axis">.....</g>
            <g class="y-axis">.....</g>
            <rect x="30" width="30" height="80" />
            <rect x="60" width="10" height="25" />
            <rect x="90" width="15" height="40" />
            <rect x="120" width="20" height="50" />
     </g>
</svg>

此外，我需要将其集中在任何屏幕分辨率上。请帮我找到解决方案。