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

【问题标题】：D3 grouped bar chart: How to rotate the text of x axis ticks?D3分组条形图：如何旋转x轴刻度的文本？
【发布时间】：2014-01-23 17:03:17
【问题描述】：

我用的是分组条形图(http://bl.ocks.org/mbostock/3887051)，但是x轴的文字很长，如附图所示。如何旋转文本？谢谢你。

【问题讨论】：

标签： javascript svg d3.js bar-chart axis-labels

【解决方案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

【讨论】：

【解决方案2】：

您可能需要考虑使用D3FC，它可以直接替换支持此功能的 D3 轴组件。

D3FC 有一个适配器组件，如果它们发生碰撞，它将自动旋转轴标签：

const axis = fc.axisLabelRotate(fc.axisOrdinalBottom(foodScale));

它在行动：

全面披露 - 我是 D3FC 库的维护者和贡献者！

【讨论】：

【解决方案3】：

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

【讨论】：

请注意：不需要将函数传递给最终的attr() 调用，因为字符串不依赖于数据点。