D3分组条形图：如何旋转x轴刻度的文本？ [英] D3 grouped bar chart: How to rotate the text of x axis ticks?

问题描述

我使用分组条形图（

结果如下所示：

确保您完全了解此部分的代码：

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

-65

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

Also, you should increase margin at the bottom, so that the rotated text doesn't get clipped.

警告：旋转的文本不可避免地由浏览器在最后呈现（D3只是创建适当的svg，由浏览器解释），他们做一个糟糕的工作呈现旋转的文本（相反，让我们说高级绘图或图表软件）。

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).

此外，相关的StackOverflow问题：

Also, related StackOverflow questions:

rotate-x-axis-text-in-d3

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

这篇关于D3分组条形图：如何旋转x轴刻度的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！