javascript D3 分组条形图：如何旋转 x 轴刻度的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20947488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3 grouped bar chart: How to rotate the text of x axis ticks?
提问by Linlin
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. 
我正在使用分组条形图（http://bl.ocks.org/mbostock/3887051），但 x 轴的文本很长，如附图所示。如何旋转文字？谢谢你。
回答by VividD
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)");
-65is the angle the label text is rotated, in degrees.
-65是标签文本旋转的角度，以度为单位。
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).
警告：旋转文本最终不可避免地由浏览器呈现（D3 只是创建了由浏览器解释的适当 svg），并且它们在呈现旋转文本方面做得很糟糕（而不是说高级绘图或图表软件）。
Also, related StackOverflow questions:
此外，相关的 StackOverflow 问题：
回答by Manoj
Use SVG transformattribute rotate,
使用 SVG变换属性旋转，
This transform definition specifies a rotation by a degrees about a given point
此变换定义指定围绕给定点旋转度数
Try this code :
试试这个代码：
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("id", "x")
.attr("transform", "translate(0," + (h) + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function (d) {
return "rotate(-30)";
});
回答by ColinE
You might want to consider using D3FC, which has a drop-in replacement for the D3 axis component that supports this feature.
您可能需要考虑使用D3FC，它可以直接替代支持此功能的 D3 轴组件。
D3FC has an adapter component that will automatically rotate axis labels if they collide:
D3FC 有一个适配器组件，如果它们发生碰撞，它将自动旋转轴标签：
const axis = fc.axisLabelRotate(fc.axisOrdinalBottom(foodScale));
Here it is in action:
这是在行动：
Full disclosure- I am a maintainer and contributor to the D3FC library!
完全公开- 我是 D3FC 库的维护者和贡献者！
