Thursday, May 23, 2024
 Popular · Latest · Hot · Upcoming
81
rated 0 times [  82] [ 1]  / answers: 1 / hits: 21306  / 11 Years ago, mon, january 6, 2014, 12:00:00

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


More From » svg

 Answers
16

A reasonable solution can be found here



The result looks like this:



enter



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


[#73349] Saturday, January 4, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jayden

Total Points: 108
Total Questions: 109
Total Answers: 107

Location: Kenya
Member since Mon, Jun 14, 2021
3 Years ago
;