Javascript 如何左对齐y轴标签D3图表

如何在d3中左对齐y轴标签？ 尝试使用.orient（左）但没有帮助。 尝试转换标签。 请帮助将标签向左对齐 例子： 好 很好 非常 古德1 非常好 非常1 好 很好 非常 古德1 非常好 非常1 好 很好 非常 古德1 非常好 非常1 好 很好 非常 古德1 非常好 非常1

const data=[{name:'Good'，value:1}，{name:'Very Good'，value:2}，{name:'Very'，value:1}，{name:'Good1'，value:1}，{name:'Very1'，value:1}，{name:'Good2'，value:1}，{name:'Very Good2'，value:2}，{name:'Very2'，value:1}，{name:'Good3'，value:1}，{name:'Very Good3'，value:2}，{name:'Very3'，value:1}，{name:'Good4'，value:1}，{name:'Very5'，value:2}，{name:'Very5'，value:1}，{name:'Good6'，value:2}，{name:'Very6'，value:1}，{name:'Good7'，value:1}，{name:'Very7'，value:2}，{name:'Very7'，value:1}，{name:'Good8'，value:1}，{name:'Good8}，{name:'Very9'，值：1}]；
//我们希望每个矩形都以其应有的值为中心。
//这意味着我们需要有一个节点宽度
设nodeWidth=33；
设nodeHeight=18；
if（this.viewBy！=='Overlapping'+this.jobOrSkill）{
节点宽度=60；
节点高度=18；
}
高度=1000；
常数宽度=620，
paddingLeft=0，
paddingTop=0，
保证金={
前20名，
左：140，
右:40,，
底数：40
};
if（this.totalSkills&&this.totalSkills.length<10）{
高度=250；
}
if（this.totalSkills&&this.totalSkills.length>10&&this.totalSkills.length<20）{
高度=400；
}
如果（this.totalSkills&&this.totalSkills.length>20&&this.totalSkills.length<30）{
高度=600；
}
const innerWidth=宽度+（margin.left+margin.right）；
const innerHeight=高度+（margin.top+margin.bottom）；
//我们还需要确保所有节点都有空间，甚至在边缘。
//实现这一点的一种方法是稍微扩展一点域。
const domain=d3.extent（data.map（d=>Math.round（d.value））；
常数x=d3.scaleLinear（）
.domain（[Math.round（域[0]）-1，Math.round（域[1]）+1]））
.范围（[0，宽度]）；
常量y=d3.scaleBand（）
.domain（data.map（（d，i）=>d.name&&d.name.length>20？d.name=d.name.slice（0，20）+’…'：d.name=d.name））
.范围（[高度，0]）
.填充（1）；
const svg=d3.select（“#comparisonchartdata”）
.attr（'width'，width+margin.left）
.attr（'height'，height+margin.top+margin.bottom）；
常数g=svg
.append（'g'）
.attr（'transform'，'translate（${margin.left}${margin.right}）`）；
g、 附加（'g'）
.classed（'x轴'，真）
.attr（'transform'，'translate（0，${height}）`）
.call（d3.axisBottom（x））；
d3.全选（'.y轴'）。全选（'.tick'））
.append（'svg:title'）
.数据（数据）
.文本（功能（d）{
返回d.name；
});
g、 附加（'g'）
.classed（'y轴'，真）
.call（d3.axisLeft（y.tickPadding（10））；
常量条=g.append（'g'）
.selectAll（'rect'）
.数据（数据）
.attr（'stroke'，'#e5'）
.attr（“类”、“行”）；
bar.exit（）.remove（）；
//在这里之前都一样
输入（）
.append（'rect'）
//宽度已成为常数
.attr（'width'，nodeWidth）
//现在，变换每个节点，使其围绕其应有的值
.attr（'transform'，'translate（${-nodeWidth/2}-8）`）
//.合并（条）
//`x`再次直接表示位置
.attr（'x'，d=>x（数学四舍五入（d.value）））
.attr（'y'，d=>y（d.name））
.attr（“高度”，节点高度）
.attr（'fill'，d=>Math.round（d.value）>0&&this.viewBy=='Overlapping'+this.jobOrSkill？'
this.viewBy==='Overlapping'+this.jobOrSkill&&Math.round（d.value）===0？'#9a16ca':
this.viewBy==='Overlapping'+this.jobOrSkill&&Math.round（d.value）<0？'dc267f'：
this.viewBy==“组织唯一”？“#016970”：this.viewBy===“组织不存在”？“#757575”：“648fff”）；
//现在还有一件事，我们想给每个节点添加标签。
//“我们不能生孩子，我们要把他们分别添加到情节中。”
//使用与条形图相同的“数据”
常量标签=g.append（'g'）
.selectAll（'text'）
.数据（数据）；
labels.exit（）.remove（）；
标签。输入（）
.append（'文本'）
.attr（'填充'，'白色'）
.attr（'text-anchor'，'middle'）//将文本居中对齐
//.合并（条）
//`x`直接表示位置
.attr（'x'，d=>x（数学四舍五入（d.value）））
//将半个条形的高度添加到每个节点的中心
.attr（'y'，d=>y（d.name）+y.bandwidth（）/4）
//实际填写文本this.viewBy=='Overlapping'+this.jobOrSkill？'+'+Math.round（d.value）：
.text（d=>Math.round（d.value）>0&&this.viewBy===“重叠”+this.jobOrSkill？Math.round（d.value）
：this.viewBy==='Unique to Organization'？'Unique'：this.viewBy==='uncible to Organization'？'uncible'：Math.round（d.value））
.attr（'title'，d=>y（d.name））
.attr（'transform'，'translate（0，0）`）
.attr（'dy'，5）；

---

我能够通过组合

文本锚定：start

和

transform（-60,0）

来获得它：

const数据=[{
名字：'好'，
价值：1
}, {
名字：“非常好”，
价值：2
}, {
名字：“非常”，
价值：1
}, {
名称：'Good1'，
价值：1
}, {
名称：“非常好1”，
价值：2
}, {
名称：“Very1”，
价值：1
}, {
名称：'Good2'，
价值：1
}, {
名称：“非常好2”，
价值：2
}, {
名称：“Very2”，
价值：1
}, {
名称：'Good3'，
价值：1
}, {
名称：“非常好3”，
价值：2
}, {
名称：“Very3”，
价值：1
}, {
名称：'Good4'，
价值：1
}, {
名称：“非常好5”，
价值：2
}, {
名称：“Very5”，
价值：1
}, {
名称：'Good6'，
价值：1
}, {
姓名：“非常好6”，
价值：2
}, {
名称：“Very6”，
价值：1
}, {
姓名：'Good7'，
价值：1
}, {
姓名：“非常好7”，
价值：2
}, {
名称：“Very7”，
价值：1
}, {
名称：'Good8'，
价值：1
}, {
名称：“非常好8”，
价值：2
}, {
名称：“Very9”，
价值：1
}];
//我们