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

Question

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

Answer 1

这里可以找到合理的解决方案

结果如下:

确保您完全理解这部分代码:

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问题:

旋转-x轴-文本在-D3

如何对旋转-X轴文本中,酒窝-JS

Answer 2

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

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

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

这是在行动中：

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

Answer 3

使用SVG变换属性旋转，

此变换定义指定围绕给定点旋转一定度数

试试这个代码：

演示版

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