Cómo evitar la superposición de texto SVG

Dado que el texto está absolutamente posicionado, no hay una buena manera de lidiar con las etiquetas superpuestas. Los SVG tienen elementos SVGs que le permiten tspan palabras, pero eso es todo.

En uno de mis proyectos de visualización de datos, tuvimos que lidiar con muchas etiquetas que debían cambiar de tamaño cuando el gráfico se encogía. La forma en que manejamos esto fue calculando el espacio disponible. Luego "simular" el tamaño total de una etiqueta de texto (en un tamaño de fuente dado) usando:

 selection.node().getBBox().width selection.node().getBBox().height

Si las dimensiones de la nueva etiqueta se hubieran superpuesto, intentaría nuevamente con un tamaño de fuente más pequeño, hasta que las dimensiones de la etiqueta fueran más pequeñas que el espacio disponible. No fue una gran solución...

Un problema con la generación de elementos SVG (para medir su tamaño) es que desencadena una nueva representación, que es costosa, considerando la cantidad de iteraciones.

Puede mejorar el rendimiento de este enfoque de "fuerza bruta", utilizando un <canvas> para calcular el tamaño de una etiqueta determinada, sin renderizar nada:

 let canvasEl = document.createElement('canvas'); let canvas = canvasEl.getContext('2d').font('12px sans-serif'); const getWidthHeightOfLabel = (label) => { return { width: canvas.measureText(label).width, height: canvas.measureText(label).height }; }

En ciertas situaciones, evitamos las etiquetas SVG por completo y optamos por texto HTML simple y antiguo, que colocaríamos dinámicamente sobre el SVG.

¡Avíseme si mi sugerencia no está clara o si necesita información adicional! Gracias.