0
189
Vistasetiqueta del eje x sobrescrita en el gráfico svg
Estoy trabajando en un gráfico de barras apiladas. Aquí está el codepen https://codepen.io/a166617/pen/NWvZGLd
Como puede ver en codepen, la etiqueta del eje x se superpone entre sí y estoy tratando de hacerlo en ángulo para que no se superpongan entre sí. Por ejemplo, esta captura de pantalla a continuación
Traté de agregar transform: rotateX(90deg) como estilo, pero no se muestra correctamente. Aquí está la línea de código donde agregué el css anterior
<text x={125 + rowIndex * 60} y={520} textAnchor="middle" style={{ fill: 'red', fontSize: '13px', transform: `rotateX(90deg)` }} >{entry.name}</text>¿Puede alguien decirme cómo lograr esto para que la etiqueta del eje x se vea claramente?
1 Respuestas
Responde la pregunta0
Las transformaciones de rotación rotarán alrededor del origen actual. Que para los SVG por defecto es el origen del SVG. Eso es 0,0. Debido a que su texto no está cerca de (0, 0), su transformación rotará el texto lejos de donde lo desea.
Para evitar eso, deberá cambiar el transform-origin antes de rotar. Algo como esto:
<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> Lo hice de una manera ligeramente diferente en mi respuesta actualizada a su pregunta anterior. Usé la versión especial de rotar ( rotate(angle,cx,cy) ) que solo acepta el atributo de transform SVG. Incluye un centro de rotación X,Y. Para CSS, debe usar transform-origin .