D3分组条形图：如何旋转x轴刻度的文本？

Question

我使用分组条形图（http://bl.ocks.org/mbostock/3887051），但x轴的文本非常长，如附图所示。如何旋转文字？谢谢。

Answer 1

一个合理的解决方案，可以发现here

结果看起来是这样的：

确保你完全理解的代码，这部分：

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是标签文本以角度旋转的角度。

此外，您应该增加底部的边距，以便旋转后的文本不会被剪切。

警告：旋转文本不可避免地由浏览器在最后渲染（D3只是创建适当的svg，由浏览器解释），并且它们渲染旋转文本的操作很糟糕（而不是让高级绘图或绘图软件说） 。

此外，相关的StackOverflow的问题：

rotate-x-axis-text-in-d3

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

Answer 2

使用SVG transform属性旋转，

这种转换定义指定有关给定的点

由度的旋转

试试这个代码：

DEMO

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