Javascript 为什么我的D3轴标签被压扁了？

我试图创建一个d3散点图，y轴上有顺序类别。我的问题是，代表有序类别的字母似乎相互重叠。我希望它们以完整的文字出现

我将

margin.left

的值从100增加到300，希望这能拓宽图形和svg容器左边缘之间的空间。这将图形和边距都移动了300，如图所示，边距仍然很窄

我尝试过的其他事情：

• 将.tickFormat（函数（d，i）{returnname[i]}）添加到最后一行
• 删除代码中“margin.left”的其他实例

var数据=[
[50, 30],
[100, 170],
[15, 40],
[20, 80]
];
变量名称=[“玛吉”、“米莉”、“莫莉”、“梅”]；
var保证金={
前20名，
右：150，
底数：60，
左：100
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d））{
返回d[0]；
})])
.范围（[0，d3.最大值（数据，函数（d））{
返回d[0]；
})])
变量y=d3.scaleOrdinal（）
.域名（名称）
.范围（[30170,40,80]）；
var yAxis=d3.轴左（y）；
var xAxis=d3.axisBottom（x）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.selectAll（“圆圈”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“cx”，功能（d）{
返回d[0]；
})
.attr（“cy”，函数（d）{
返回d[1]；
})
.attr（“r”，5）；
var chartGroup=svg.append（“g”）；
chartGroup.append（“g”）.attr（“class”，“x轴”）.attr（“transform”，“translate（0，“+height+”））））.call（d3.axisBottom（x.ticks（5））；
chartGroup.append（“g”）.attr（“class”，“y轴隐藏”）.call（d3.axisLeft（y）.ticks（5））
这是一个有趣且不同寻常的问题。这里的问题只是你对名字的不幸选择（没有双关语的意思），即
name

尽管不是保留字，但使用
名称时可能会发生奇怪的事情。请看一下这个片段：


var svg=d3.选择（“svg”）；
变量名称=[“爱丽丝”、“伯纳德”、“克里斯”]；
var scale=d3.scalePoint（）
.域名（名称）
.范围（[20280]）；
var axis=d3.axisBottom（scale）（svg.append（“g”）
.attr（“转换”、“翻译（0,50）”）
这是一个有趣且不同寻常的问题。这里的问题只是你对名字的不幸选择（没有双关语的意思），即
name

尽管不是保留字，但使用
名称时可能会发生奇怪的事情。请看一下这个片段：


var svg=d3.选择（“svg”）；
变量名称=[“爱丽丝”、“伯纳德”、“克里斯”]；
var scale=d3.scalePoint（）
.域名（名称）
.范围（[20280]）；
var axis=d3.axisBottom（scale）（svg.append（“g”）
.attr（“转换”、“翻译（0,50）”）

我更改了变量“name”，并且名称出现在轴上！太高兴了。非常感谢。附言。很好的双关语。我更改了变量“name”，并且名称出现在轴上！太高兴了。非常感谢。好双关语。