如何将X轴标签旋转到条形图中的条形图上？

Question

我需要对齐x轴标签，如下面的快照所示：

我试过了：

.attr("transform", function(d) {
    return "rotate(-90)" 
})

但是它旋转了整个轴/刻度。

我该如何解决这个问题？

jsFiddle

修改 我更新了我的代码：

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")  
.style("text-anchor", "end")
.attr("dx", "0em")
.attr("dy", "0em")
.attr("transform", function(d) {
    return "rotate(-90)" 
});

现在标签旋转到-90度。我怎么把它放到酒吧？

jsFiddle

Answer 1

您只需要旋转文本，然后正确翻译它。请参阅更新的小提琴：

svg.selectAll('.tick')
.select('text')
.attr('transform', 'rotate(-90) translate(50, -12)');

http://jsfiddle.net/MjFgK/18/

Answer 2

我使用translate并不是那么好。但这fiddle只是运作正常。

整个轴/比例旋转的原因是因为当使用x和y位置创建文本时，它的原点变为(0,0)。

因此，要旋转文字标签，您需要使用translate代替x and y来定位这些文字。

在fiddle我在底部添加了以下代码，文字标签正在旋转。

如果你想更多地旋转它。你可以改变旋转度。

svg.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("transform", function(d, i) {
    return "translate(" + (35 + x(d.age)) + ", 250)" + "rotate(-90)"
})
.text(function(d) { return d.age; })

希望这对你有所帮助。