在 svg 图中覆盖的 x 轴标签
Posted
技术标签:
【中文标题】在 svg 图中覆盖的 x 轴标签【英文标题】:x-axis label overwritten in svg graph 【发布时间】:2022-01-07 18:22:00 【问题描述】:我正在处理堆积条形图。这是代码笔https://codepen.io/a166617/pen/NWvZGLd
正如您在 codepen 中看到的那样,x 轴标签相互重叠,我试图使其成一个角度,以便它们不会相互重叠。例如下面这个截图
我尝试将transform: rotateX(90deg)
添加为样式,但无法正确显示。这是我添加上述css的代码行
<text
x=125 + rowIndex * 60
y=520
textAnchor="middle"
style= fill: 'red',
fontSize: '13px',
transform: `rotateX(90deg)`
>entry.name</text>
有人可以告诉我如何实现这一点,以便清楚地查看 x 轴标签。
【问题讨论】:
我已在您之前的问题中更新了my old answer 以添加缺少的标签。 【参考方案1】:旋转变换将围绕当前原点旋转。对于 SVG,它默认为 SVG 的原点。那是0,0。因为您的文本离 (0, 0) 不远,所以您的转换会将文本旋转到远离您想要的位置。
为避免这种情况,您需要在旋转之前更改 transform-origin
。像这样的:
<text
x=125 + rowIndex * 60
y=520
textAnchor="end"
style= fill: 'red',
fontSize: '13px',
transformOrigin: (125 + rowIndex * 60)+'px 520px',
transform: 'rotateZ(-45deg)'
>entry.name</text>
在我对您上一个问题的更新答案中,我做了一个稍微不同的方式。我使用了只有 SVG transform
属性接受的特殊版本的旋转 (rotate(angle,cx,cy)
)。它包括一个 X、Y 旋转中心。对于 CSS,您必须使用 transform-origin
。
【讨论】:
以上是关于在 svg 图中覆盖的 x 轴标签的主要内容,如果未能解决你的问题,请参考以下文章
R语言删除ggplot可视化图中的所有x轴轴标签实战:ggplot可视化默认包含所有x轴轴标签删除ggplot可视化图中的所有x轴轴标签实战
如何从 seaborn / matplotlib 图中删除或隐藏 x 轴标签