在 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轴轴标签实战

SVG-标签

ggplot折线图中的多行x轴标签

如何从 seaborn / matplotlib 图中删除或隐藏 x 轴标签

如何使用 Plotly 删除堆叠和分组条形图中的 x 轴刻度标签

如何使用R中的绘图功能更改散点图中x轴和y轴标签的字体大小和颜色?