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.
相关问题
- Is there a limit to how many levels you can nest i
- How to toggle on Order in ReactJS
- void before promise syntax
- Keeping track of variable instances
- Can php detect if javascript is on or not?
A reasonable solution can be found here
The result looks like this:
Make sure you fully understand this portion of code:
-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
You might want to consider using D3FC, which has a drop-in replacement for the D3 axis component that supports this feature.
D3FC has an adapter component that will automatically rotate axis labels if they collide:
Here it is in action:
Full disclosure - I am a maintainer and contributor to the D3FC library!
Use SVG transform attribute rotate,
This transform definition specifies a rotation by a degrees about a given point
Try this code :
DEMO