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.
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.
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:
how-to-rotate-x-axis-text-in-dimple-js