rotar el texto del eje x en d3

81

Soy nuevo en la codificación d3 y svg y estoy buscando una forma 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 del gráfico de barras. Así que estoy buscando rotar el texto para que se ejecute verticalmente (en lugar de horizontalmente) debajo del xAxis.

Intenté agregar el atributo de transformación: .attr ("transform", "rotate (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 pensamiento sobre lo que estoy haciendo mal sería genial. ¿Necesito ajustar también las posiciones xey? Y, si es así, por cuánto (difícil de solucionar cuando puedo verlo en Firebug).

jschlereth
fuente

Respuestas:

165

Si establece una transformación de rotate (180), rota el elemento en relación con el origen , no en relación con el ancla del texto. Por lo tanto, si los elementos de texto también tienen un X y Y conjunto de atributos a la posición de ellos, es muy probable que usted ha 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 ancla del texto permanezca 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 usar los argumentos opcionales cx y cy para la transformación de rotación de SVG , de modo que pueda especificar el origen de la rotación. Esto termina siendo un poco redundante, pero para completar, se ve así:

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>
mbostock
fuente
Bien, entonces 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 de base como: <text font-size = "12px" transform = "translate (20,170) rotate (-90)"> title 1 </text>. esta bien. pero digamos que el siguiente título es más largo, no quiero que se superponga al gráfico y también me gustaría minimizar el espacio entre el eje x y el gráfico en sí.
jschlereth
1
Si respondí a su pregunta, agregue una casilla de verificación para marcar la pregunta como respondida. Si tiene una pregunta adicional, cree una nueva. Creo que puede estar preguntando sobre el atributo text-anchor para establecer la alineación del texto, o posiblemente el atributo dy para establecer la línea de base del texto.
mbostock
3
Entendido ... text-anchor = 'end' <text text-anchor = "end" transform = "translate (20,130) rotate (-90)"> title1 </text> Gracias de nuevo por la ayuda, Mike. ¡Tú Molas!
jschlereth
44

Extraído descaradamente de otra parte , todo el mérito del autor.

margen incluido solo para mostrar 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)");
20hombre
fuente
2

Un problema con estas etiquetas giratorias del eje D3 es que tiene que volver a aplicar esta lógica cada vez que renderiza el eje. Esto se debe a que no tiene acceso a las selecciones de entrada-actualización-salida que utiliza el eje para representar las marcas y las etiquetas.

d3fc es una biblioteca de componentes que tiene un patrón de decoración que le permite acceder a la unión de datos subyacente utilizada por los componentes.

Tiene un reemplazo directo para el eje D3, donde la rotación de la etiqueta del eje se realiza de la siguiente manera:

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

Tenga en cuenta que la rotación solo se aplica en la selección de entrada.

ingrese la descripción de la imagen aquí

Puede ver algunos otros usos posibles de este patrón en la página de documentación del eje .

ColinE
fuente