D3 grouped bar chart: How to rotate the text of x axis ticks?

Question

I'm using the Grouped Bar Chart(http://bl.ocks.org/mbostock/3887051), but the text of the x-axis is very long, as shown in attached picture. How to rotate the text? Thank you.

Answer 1

A reasonable solution can be found here

The result looks like this:

Make sure you fully understand this portion of code:

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

-65 is the angle the label text is rotated, in degrees.

Also, you should increase margin at the bottom, so that the rotated text doesn't get clipped.

WARNING: Rotated text is inevitably rendered by browsers at the end (D3 just creates appropriate svg that is interpreted by browsers), and they do a lousy job rendering rotated text (as opposed to lets say advanced drawing or diagramming software).

Also, related StackOverflow questions:

rotate-x-axis-text-in-d3

how-to-rotate-x-axis-text-in-dimple-js