如何将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; })

希望这对您有所帮助。