rotar el texto del eje x en d3

Soy nuevo en d3 y svg encoding 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.

He intentado agregar el atributo de transformación: .attr (“transformar”, “rotar (180)”)

Pero cuando hago eso, el texto desaparece por completo. Intenté boost la altura del canvas 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).

Si establece una transformación de rotación (180), gira el elemento relativo al origen , no relativo al ancla de texto. Por lo tanto, si sus elementos de texto también tienen un atributo xey para establecerlos, es muy probable que haya girado el texto fuera de la pantalla. Por ejemplo, si lo intentaste,

Hello! 

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.

 Hello! 

Otra opción es usar los argumentos opcionales cx y cy para transformar la transformación de SVG, de modo que pueda especificar el origen de la rotación. Esto termina siendo un poco redundante, pero para ser completo, se ve así:

 Hello World! 

Sin vergüenza sacado de otro lado , todo crédito al autor.

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

 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 esta rotulación de tags de eje D3 es que debe volver a aplicar esta lógica cada vez que represente 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 tags.

d3fc es una biblioteca de componentes que tiene un patrón de decorado que le permite obtener acceso 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.

enter image description here

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