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

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

我试过：

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

但它旋转了整个轴/比例

我该如何解决这个问题

编辑： 我更新了我的代码：

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度。我怎样才能把它弄到吧台上

---

我不太擅长使用

翻译
。但这很好用

整个轴/刻度旋转的原因是，当使用
x
和
y
位置创建文本时，其原点变为
（0,0）

因此，要旋转文本标签，您需要使用
translate
而不是
x和y
来定位这些文本

在中，我在底部添加了下面的代码，文本标签正在旋转

如果你想再旋转一点。你可以改变旋转的角度

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; })
svg.selectAll（“.text”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“转换”，函数（d，i）{
返回“translate”（+（35+x（d.age））+”，250）+“rotate（-90）”
})
.text（函数（d）{返回d.age；}）
希望这对你有帮助。
我不太擅长使用
翻译
。但这很好用

整个轴/刻度旋转的原因是，当使用
x
和
y
位置创建文本时，其原点变为
（0,0）

因此，要旋转文本标签，您需要使用
translate
而不是
x和y
来定位这些文本

在中，我在底部添加了下面的代码，文本标签正在旋转

如果你想再旋转一点。你可以改变旋转的角度

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; })
svg.selectAll（“.text”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“转换”，函数（d，i）{
返回“translate”（+（35+x（d.age））+”，250）+“rotate（-90）”
})
.text（函数（d）{返回d.age；}）
希望这对您有所帮助。
您只需旋转文本，然后正确翻译。请参阅更新的小提琴：

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

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

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

时间很短。太好了+1:）那很短。太好了+1 :)