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

我使用的是分组条形图（），但x轴的文本非常长，如所附图片所示。如何旋转文本？多谢各位

可以找到合理的解决方案

结果如下所示：

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

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），而且他们在呈现旋转文本时做得很糟糕（与高级绘图或图表软件相反）

另外，相关问题：

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

---

您可能需要考虑使用，它支持支持此特性的D3轴组件替换。 D3FC有一个适配器组件，如果轴标签发生碰撞，该组件将自动旋转轴标签：

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

这就是它的作用：

---

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

请注意：不需要将函数传递到最后的

attr（）

调用中，因为字符串不依赖于数据点。