rotar el texto del eje x en d3

Soy nuevo en d3 y svg codificación y estoy buscando una manera de rotar texto en el eje x de un gráfico. Mi problema es que, por lo general, los títulos de xAxis son más largos que las barras en el gráfico de barras. Así que estoy buscando rotar el texto para que se ejecute verticalmente (en lugar de horizontalmente) debajo del eje x.rotar el texto del eje x en d3

He intentado añadir el atributo transform: .attr ("transformar", "Girar (180)")

Pero cuando hago eso, el texto desaparece por completo. Intenté aumentar la altura del lienzo svg, pero aún no pude ver el texto.

Cualquier idea sobre lo que estoy haciendo mal sería genial. ¿Debo también ajustar las posiciones xey? Y, en caso afirmativo, por cuánto (difícil de solucionar cuando puedo verlo en Firebug).

Fuente

2012-06-28 jschlereth

129

Si define una transformación de rotación (180), se hace girar el elemento en relación con el origen, no en relación con el ancla de texto. Por lo tanto, si sus elementos de texto también tienen un atributo x y y establecido para colocarlos, es muy probable que haya girado el texto fuera de la pantalla. Por ejemplo, si lo intentó,

<text x="200" y="100" transform="rotate(180)">Hello!</text>

el ancla de texto estaría en ⟨-200,100⟩. Si desea que el anclaje de texto se mantenga en ⟨200,100⟩, entonces puede usar la transformación para colocar el texto antes de rotarlo, cambiando así el origen.

<text transform="translate(200,100)rotate(180)">Hello!</text>

Otra opción es utilizar los opcionales cx y cy argumentos a SVG de rotate transform, de manera que se puede especificar el origen de la rotación. Esto termina siendo un poco redundante, pero está completo, se ve así:

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>

Fuente

2012-06-29 06:30:11 mbostock

Bien, así que esto es perfecto. Gracias, Mike. Esto hace (casi) todo lo que necesito hacer.Pero ahora la pregunta es ¿cómo cambio automáticamente la posición y en función de la longitud de la variable? SI configuro la línea base como: title 1. esta bien. pero diga que el próximo título es más largo. No quiero que se superponga al gráfico y también quisiera minimizar el espacio entre el eje X y el gráfico en sí. – jschlereth

Si contesté su pregunta, agregue una casilla de verificación para marcar la pregunta como respondida. Si tiene una pregunta adicional, ¡cree una nueva pregunta! Creo que puede estar preguntando sobre el atributo de anclaje de texto para establecer la alineación del texto, o posiblemente el atributo dy para establecer la línea base del texto. – mbostock

Suena bien. Hará. ¡Gracias! – jschlereth

Desvergonzadamente arrancado de elsewhere, todo el crédito al autor.

margen incluido solo para mostrar que el margen inferior debe aumentarse.

var margin = {top: 30, right: 40, bottom: 50, left: 50}, 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", ".15em") 
    .attr("transform", "rotate(-65)");

Fuente

2013-05-31 18:26:42 20man

Un problema con esta rotación etiquetas del eje D3 es que usted tiene que volver a aplicar esta lógica cada vez que se renderiza el eje. Esto se debe a que no tiene acceso a las selecciones enter-update-exit que utiliza el eje para representar los ticks y las etiquetas.

d3fc es una biblioteca de componentes que tiene un decorate pattern que le permite obtener acceso a la unión de datos subyacente utilizada por los componentes.

Tiene una gota en el reemplazo para el eje D3, donde la rotación etiqueta de eje se realiza como sigue:

var axis = fc.axisBottom() 
    .scale(scaleBand) 
    .decorate(function(s) { 
    s.enter() 
     .select('text') 
     .style('text-anchor', 'start') 
     .attr('transform', 'rotate(45 -10 10)'); 
    });

en cuenta que la rotación se aplica sólo en la selección entrar.

se pueden ver algunos otros usos posibles de este patrón en el axis documentation page.

Fuente

2016-02-17 06:43:18 ColinE

Respuesta

Cuestiones relacionadas