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

时间:2019-05-03 04:19:42

标签: css angular css3 d3.js svg

我在示例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>

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

0 个答案:

没有答案