Javascript 具有x+；y轴：x轴值分布

我试图展示一个带有x和y轴的垂直条形图。我得到了y轴的条形图，但是我在x轴上挣扎

x轴文本标签随条形图的宽度均匀分布：x轴上有宽度不同的标记/垂直线，特别是第一节和最后一节，尽管我已经指定了

缩放带和
域

我的代码：

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg class="v5chart" width="960" height="500"></svg>

<style>
/*Rectangle bar class styling*/
.bar {
  fill: #0080FF
}
.bar:hover {
  fill: #003366
}

/*Text class styling*/
.text {
  fill: white;
  font-family: sans-serif
}
</style>

<script>

////VERTICAL BAR CHART WITH SVG AND NAMES
// Create data array of values to visualize
var dataArray = [{ "Player": "John Doe", "Points": 23 }, { "Player": "Jane Doe", "Points": 13 }, { "Player": "Mary Jane", "Points": 21 }, { "Player": "Debasis Das", "Points": 14 }, { "Player": "Nishant", "Points": 37 }, { "Player": "Mark", "Points": 15 }, { "Player": "Andrew", "Points": 18 }, { "Player": "Simon", "Points": 34 }, { "Player": "Lisa", "Points": 30 }, { "Player": "Marga", "Points": 20 }];

// Create variable for the SVG
var canvas = d3.select(".v5chart1").append("g").attr("transform", "translate(20,30)");

var canvasWidth = 500;


var maxValue = d3.max(dataArray, function (d) { return d.Points; });
var canvasHeight = maxValue*10;

var heightScale = d3.scaleLinear()
    .domain([0, d3.max(dataArray, function (d) { return d.Points; })])
    .range([canvasHeight, 0]); //use max value (37) * 10

var y_axis = d3.axisLeft()
    .scale(heightScale);

var x = d3.scaleBand()
    .rangeRound([0, canvasWidth], .1);

x.domain(dataArray.map(function (d) { return d.Player; }));

var x_Axis = d3.axisBottom(x);

// Select, append to SVG, and add attributes to rectangles for bar chart
canvas.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("height", function (d, i) { return (d.Points * 10) })
    .attr("width", canvasWidth/dataArray.length)    
    .attr("x", function (d, i) { return (i * (canvasWidth / dataArray.length)) })
    .attr("y", function (d, i) { return canvasHeight - (d.Points * 10) });

// Select, append to SVG, and add attributes to text
canvas.selectAll("text")
    .data(dataArray)
    .enter().append("text")
    .text(function (d) { return d.Points })
    .attr("class", "text")
    .attr("x", function (d, i) { return (i * (canvasWidth / dataArray.length)) + (canvasWidth / dataArray.length)/2 })
    .attr("y", function (d, i) { return canvasHeight + 20 - (d.Points * 10) });



canvas.append("g")
    .attr("transform", "translate(0,0)")
    .call(y_axis);

canvas.append("g")
    .attr("transform", "translate(0," + canvasHeight + ")")
    .call(x_Axis)
    .selectAll("text")
    .attr("x",40)
    .attr("transform", function (d) {
        return "rotate(65)"
    });

</script>


/*矩形条类样式*/
.酒吧{
填充：#0080FF
}
.bar:悬停{
填充：#003366
}
/*文本类样式*/
.文本{
填充物：白色；
字体系列：无衬线
}
////带有SVG和名称的垂直条形图
//创建要可视化的值的数据数组
var dataArray=[{“玩家”：“约翰·多伊”，“点数”：23}，{“玩家”：“简·多伊”，“点数”：13}，{“玩家”：“玛丽·简”，“点数”：21}，{“玩家”：“德巴西斯·达斯”，“点数”：14}，{“玩家”：“尼桑”，“点数”：37}，{“玩家”：“马克”，“点数”：15}，{“玩家”：“安德鲁”，“点数”：18}，{“玩家”：“西蒙”，“点数”：34}，{“玩家”：“丽莎”，“点数”：30}，{“玩家”：“玛加”，“点数”：20}]；
//为SVG创建变量
var canvas=d3.select（“.v5chart1”）.append（“g”）.attr（“transform”、“translate（20,30）”）；
var canvasWidth=500；
var maxValue=d3.max（数据数组，函数（d）{返回d.Points；}）；
var canvasHeight=maxValue*10；
var heightScale=d3.scaleLinear（）
.domain（[0，d3.max（数据数组，函数（d）{返回d.Points；}）]）
.范围（[画布高度，0]）//使用最大值（37）*10
变量y_axis=d3.axisLeft（）
.刻度（高度刻度）；
var x=d3.scaleBand（）
.rangeRound（[0，画布宽度]，.1）；
x、 域（dataArray.map（函数（d）{returnd.Player；}））；
var x_Axis=d3.axisBottom（x）；
//选择、附加到SVG，并将属性添加到条形图的矩形中
canvas.selectAll（“rect”）
.数据（数据阵列）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“高度”，函数（d，i）{返回（d.Points*10）}）
.attr（“宽度”，canvasWidth/dataArray.length）
.attr（“x”，函数（d，i）{return（i*（canvasWidth/dataArray.length））}
.attr（“y”，函数（d，i）{返回画布高度-（d.Points*10）}）；
//选择、附加到SVG并向文本添加属性
canvas.selectAll（“文本”）
.数据（数据阵列）
.enter（）.append（“文本”）
.text（函数（d）{返回d.Points}）
.attr（“类”、“文本”）
.attr（“x”，函数（d，i）{return（i*（canvasWidth/dataArray.length））+（canvasWidth/dataArray.length）/2}）
.attr（“y”，函数（d，i）{返回画布高度+20-（d.Points*10）}）；
canvas.append（“g”）
.attr（“转换”、“转换（0,0）”）
.呼叫（y_轴）；
canvas.append（“g”）
.attr（“变换”、“平移（0，+canvasHeight+”））
.呼叫（x_轴）
.selectAll（“文本”）
.attr（“x”，40）
.attr（“转换”，函数（d）{
返回“旋转（65）”
});

我已经在这里检查过了：
您应该已经正确阅读了您提供的链接上的
缩放带
示例：


scaleBand
提供了一种方便的
bandwidth（）
方法，为您提供每个条的宽度
d3js
中的od轴的概念是您不需要自己进行计算，因此在您的情况下，您可以将播放器名称传递给
x
函数，它将为您进行坐标计算
这同样适用于
y
计算，但我把这个留给你们去弄清楚，这应该一点也不难
关于
scaleBand
还有一件小事，您使用的是
rangeRound（）
方法，我不熟悉，但是如果您使用
range（）
方法与
padding（）
相结合，就像您链接的示例中那样，那么通过调整padding值，您可以控制条的宽度，不影响x轴。值越高，杆越薄，杆之间的空间越大


///带有SVG和名称的垂直条形图
//创建要可视化的值的数据数组
var dataArray=[{“玩家”：“约翰·多伊”，“点数”：23}，{“玩家”：“简·多伊”，“点数”：13}，{“玩家”：“玛丽·简”，“点数”：21}，{“玩家”：“德巴西斯·达斯”，“点数”：14}，{“玩家”：“尼桑”，“点数”：37}，{“玩家”：“马克”，“点数”：15}，{“玩家”：“安德鲁”，“点数”：18}，{“玩家”：“西蒙”，“点数”：34}，{“玩家”：“丽莎”，“点数”：30}，{“玩家”：“玛加”，“点数”：20}]；
//为SVG创建变量
var canvas=d3.select（“.v5chart”）.append（“g”）.attr（“transform”、“translate（20,30）”）；
var canvasWidth=500；
var maxValue=d3.max（数据数组，函数（d）{返回d.Points；}）；
var heightScale=d3.scaleLinear（）
.domain（[0，d3.max（数据数组，函数（d）{返回d.Points；}）]）
.范围（[maxValue*10,0]）//使用最大值（37）*10
变量y_axis=d3.axisLeft（）
.刻度（高度刻度）；
var x=d3.scaleBand（）
.范围（[0，画布宽度]）。填充（[0.1]）；
x、 域（dataArray.map（函数（d）{returnd.Player；}））；
var x_Axis=d3.axisBottom（x）；
//选择、附加到SVG，并将属性添加到条形图的矩形中
canvas.selectAll（“rect”）
.数据（数据阵列）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“高度”，函数（d，i）{返回（d.Points*10）}）
.attr（“宽度”，x.带宽（））
.attr（“x”，函数（d，i）{返回x（d.Player）；}）
.attr（“y”，函数（d，i）{返回370-（d.Points*10）}；
//选择、附加到SVG并向文本添加属性
canvas.selectAll（“文本”）
.数据（数据阵列）
.enter（）.append（“文本”）
.text（函数（d）{返回d.Points}）
.attr（“类”、“文本”）
.attr（“文本锚定”