Javascript d3条形图中组内的轴文字旋转

我正在使用d3.js开发一个条形图。我愿意以10度角旋转x轴文本。我将文本旋转应用为：

    g.selectAll("barbasetext2")
   .data(data)
   .enter()
   .append("text")
   .attr("class","barbasetext2")
   .text(function(d) {
        return d.NumberName; 
   })
   .attr("text-anchor", "middle")
   .attr("x", function(d) {
        return x(d.FullName) + (x.rangeBand()/2); 
   })
   .attr("y", function(d) {
        return (height - margin.bottom) + 35 ;
   })
   .attr("transform","rotate(10)") //Applying rotation here
   .attr("font-family", textfontfamily) 
   .attr("font-size", textfontsize)
   .attr("fill", textfontcolor);

据我所知，文本应该是旋转的，但在这里，整个组是旋转的。以下是完整的代码示例：

html，正文{宽度：100%；高度：100%；边距：无；填充：无；}
#条形图{宽度：95%；高度：95%；边距：无；填充：无；}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}

var elementid=“#条形图”//这里是分区id
var textfontfamily=“无衬线”；
var textfontsize=“11px”；
var textfontcolor=“黑色”；
var roundedcornerradius=6；
var baranimationduration=500//将其设置为“0”以禁用动画
VarMargin={顶部：10，右侧：30，底部：40，左侧：30}；
var width=$（elementid）.innerWidth（）-margin.left-margin.right；
var height=$（elementid）.innerHeight（）-margin.top-margin.bottom；
var middlemarginw=15；
var middlemarginh=15；
数据=[
{全名：“A1”，数字名：“NA1”，秒数：571200}，
{全名：“A2”，数字名：“NA2”，秒数：571200}，
{全名：“A3”，数字名称：“NA3”，秒数：571200}，
{全名：“A4”，号码：“NA4”，秒数：571200}，
{全名：“A5”，号码：“NA5”，秒数：571200}，
{全名：“A6”，数字名：“NA6”，秒数：571200}，
{全名：“A7”，数字名：“NA7”，秒数：568896}，
{全名：“A8”，数字名：“NA8”，秒数：568896}，
{全名：“A9”，数字名：“NA9”，秒数：568896}，
{全名：“A10”，数字名：“NA10”，秒数：568896}
];
var x=d3.scale.ordinal（）
.rangeRoundBands（[margin.left+middlemarginw，width-middlemarginw]，.1.42）；
变量y=d3.scale.linear（）
.范围（[高度-边距.底部，边距.顶部+边距.底部]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）；
雅克西斯东方（“左”）；
x、 域（data.map（函数（d）{returnd.FullName；}））；
y、 域（[d3.min（数据，函数（d）{返回d.Seconds-1000；}），d3.max（数据，函数（d）{返回d.Seconds；}]）；
var svg=d3.select（elementid）.append（“svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）；
var g=svg.append（“g”）；
g、 属性（“变换”、“平移”（+margin.left+））；	
//创建Y轴
g、 附加（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移”（+（margin.left+margin.right+margin.left+middlemarginw）+”）
.呼叫（yAxis）
.selectAll（'text'）
.文本（功能（d）{
返回d；
})
.attr（“字体系列”，textfontfamily）
.attr（“字体大小”，textfontsize）
.attr（“填充”，textfontcolor）；
函数矩形（x、y、宽度、高度、半径）{
返回“M+（x+半径）+”、“y+”h+（宽度-2*半径）+“a+半径+”、“+半径+”0 0 1“+半径+”、“+半径+”v”+（高度-2*半径）+“v”+“半径+”h+“半径+”h+（2*半径-宽度）+“h”-半径+”v”-半径+“v”+（2*半径-高度）+“a”+“半径+”0 1+“半径+”、“-半径+”z”；
};
//创建酒吧
g、 选择全部（“.bar”）
.数据（数据）
.enter（）.append（“路径”）
.attr（“类”、“条”）
.attr（“d”，函数（d）{返回矩形（x（d.FullName），height-margin.bottom，x.rangeBand（），0,5）；}）
.style（{fill:“red”}）
.transition（）
.持续时间（baranimationduration）
.ease（“线性”）
.attr（“d”，函数（d）{返回矩形（x（d.FullName），y（d.Seconds），x.rangeBand（），高度-y（d.Seconds）-边距.bottom，roundedcornerradius）；}）
.style（“填充”、“橙色”）
.样式（“不透明度”、“1”）；
//创建条形图基础文本1
g、 selectAll（“barbasetext1”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“类”、“巴巴多斯ext1”）
.文本（功能（d）{
return d.FullName；//无论您想在这里显示什么
})
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d）{
返回x（d.FullName）+（x.rangeBand（）/2）；//将是d.FullName，这里bcoz x轴与它绑定。
})
.attr（“y”，函数（d）{
返回（高度-边距.底部）+20；
})
.attr（“字体系列”，textfontfamily）
.attr（“字体大小”，textfontsize）
.attr（“填充”，textfontcolor）；
//创建条形图基础文本2
g、 全选（“巴巴多斯ext2”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“类”、“巴巴多斯ext2”）
.文本（功能（d）{
返回d.NumberName；
})
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d）{
返回x（d.FullName）+（x.rangeBand（）/2）；
})
.attr（“y”，函数（d）{
返回（高度-边距.底部）+35；
})
.attr（“变换”、“旋转（10）”）
.attr（“字体系列”，textfontfamily）
.attr（“字体大小”，textfontsize）
.attr（“填充”，textfontcolor）；
//创建X轴线
g、 附加（“行”）
.style（“笔划”、“黑色”）
.attr（“x1”，margin.left+middlemarginw+margin.left+margin.right）
.attr（“y1”，（高度-边距.底部）+5）
.attr（“x2”，宽度-边距.右侧-边距.左侧-中间边距W）
.attr（“y2”，（高度-边距.底部）+5）；

发生这种情况是因为

旋转

实际上围绕坐标系的原点（0,0）旋转（除非设置旋转中心）

有几种方法可以解决这个问题。其中之一是将文本的

x

和

y

位置设置在相同的

transform

：

.attr("transform", function(d) {
    return "translate(" + (x(d.FullName) + (x.rangeBand() / 2)) + "," +
        ((height - margin.bottom) + 35) + ") rotate(10)"
})

以下是您的更新代码：

html，正文{宽度：100%；高度：100%；边距：无；填充：无；}
#条形图{宽度：95%；高度：95%；边距：无；填充：无；}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.x轴路径{
显示：无；
}

var elementid=“#条形图”//这里是分区id
var textfontfamily=“无衬线”；
var textfontsize=“11px”；
var textfontcolor=“黑色”；
var roundedcornerradius=6；
var baranimationduration=500//将其设置为“0”以禁用动画
var保证金={