rotar el texto del eje x en d3

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).

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>

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)");

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.

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