x 轴标签在 svg 图中被覆盖

Question

我正在处理堆叠条形图。这是codepenhttps://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 轴标签。

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。

x 轴标签在 svg 图中被覆盖

x-axis label overwritten in svg graph

html

javascript

css

svg

reactjs