'rotate x-axis labels in d3 js barplot

I am using this script to create a d3 barplot using r2d3 in R.

Example: overlapping_labels

I would like to rotate the x-axis text labels. Does anyone know where the rotation should be applied? I am not familiar with javascript, only R unfortunately.

I have tried to insert the following based on other stackoverflow posts:

var txt = svg.selectAll('text').data(data);

txt.enter().append('text')
    .attr('x', function(d, i) {return (i * col_width()) + (svg_width()* layer_left) + (col_width() * 0.5); })
    .attr('y', function(d) {return svg_height()* 0.95;})
    .style('font-size', '10px') 
**    .attr('transform', 'rotate(90)')**
    .text(function(d) {return d.label;})
    .style('font-family', 'arial')
    .attr('text-anchor', 'middle');

txt.exit().remove();

txt.transition()
  .duration(500)
    .attr('x', function(d, i) {return (i * col_width()) + (svg_width()* layer_left) + (col_width() * 0.5); })
    .attr('y', function(d) {return svg_height()* 0.95;})
    .style('font-size', '10px') 
**    .attr('transform', 'rotate(90)')**
    .text(function(d) {return d.label;})
    .style('font-family', 'arial')
    .attr('text-anchor', 'middle');

This does not work; the labels are no longer visible.

no_labelsThank you!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source