Я использую гистограмму D3 в моем примере проекта Angular.Мое требование - централизовать все бары в гистограмме, которые по умолчанию выровнены по левому краю.Я только что увидел свойство 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>
Кроме того, мне нужно, чтобы он был централизован в любом разрешении экрана.Пожалуйста, помогите мне найти решение для этого.