Javascript d3 v4为什么可以'；我不能让我的x轴和条对齐吗？

我已经用x轴制作了条形图，但我不明白为什么我不能让条形图和x轴上的刻度间距精确对齐。此时，刻度线略微位于条形图中心的右侧

csv文件示例：

crop,records
CASSAVA,350
MAIZE,226
TOMATOES,137

代码：

艾比尝试D3
svg{
背景色：rgba（227,227,227,0.97）；
}
.酒吧{
利润率：20px；
}
VarMargin={顶部：20，右侧：30，底部：100，左侧：40}；
var w=500-边际。左侧-边际。右侧；
var h=500-margin.top-margin.bottom；
var=5；
克罗普达变种；
//加载csv文件
d3.csv（“crops.csv”，函数（错误、数据）{
data.forEach（函数（d）{
d、 记录=+d.记录；
});
cropData=数据；
var arrayLength=cropData.length；
var yMax=d3.max（cropData，函数（d）{
返回d.记录；
});
var yScale=d3.scaleLinear（）
.domain（[0，yMax]）
.范围（[h，0]）；
var xScale=d3.scaleBand（）
.domain（cropData.map）（函数（d）{
返回d.作物；
}))
.rangeRound（[0，w]）；
//创建svg
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w+边距。左侧+边距。右侧）
.attr（“高度”，h+margin.top+margin.bottom）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//栅栏
svg.selectAll（“rect”）
.数据（cropData）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回i*xScale.bandwidth（）+5；
})
.attr（“y”，函数（d）{
返回yScale（d.records）；
})
.attr（“宽度”，xScale.bandwidth（）-5）
.attr（“高度”，功能（d）{
返回h-yScale（d.records）；
})
.attr（“填充”、“teal”）
.attr（“类别”、“酒吧”）；
//x轴
var xAxis=d3.axisBottom（xScale）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“转换”、“平移（0、+h+）”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“.15em”）
.attr（“转换”，函数（d）{
返回“旋转（-60）”
});
//y轴
var yAxis=d3.轴左（yScale）；
svg.append（“g”）
.呼叫（yAxis）；

---

使用

I*xScale.bandwidth（）+5

和

xScale.bandwidth（）是否正确-5

在

rect

的

x

和

width

属性中，或者这不是正确的方法吗？如果我更改条，如何更改x轴上记号的间距？它们都使用

xScale

，因此我觉得这一定与此有关。

我将进行以下更改

首先，在

xScale

中引入

padding

：

var xScale = d3.scaleBand()
  .domain(cropData.map(function(d) {
    return d.crop;
  }))
  .rangeRound([0, w])
  .padding(0.1);

svg.selectAll("rect")
  .data(cropData)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return xScale(d.crop); //<-- place by xScale
  })
  .attr("y", function(d) {
    return yScale(d.records);
  })
  .attr("width", xScale.bandwidth()) //<-- no -5 padding takes care of breaks

这将按带宽的百分之一间隔条

其次，使用

xScale

放置条形图：

var xScale = d3.scaleBand()
  .domain(cropData.map(function(d) {
    return d.crop;
  }))
  .rangeRound([0, w])
  .padding(0.1);

svg.selectAll("rect")
  .data(cropData)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return xScale(d.crop); //<-- place by xScale
  })
  .attr("y", function(d) {
    return yScale(d.records);
  })
  .attr("width", xScale.bandwidth()) //<-- no -5 padding takes care of breaks

svg.selectAll（“rect”）
.数据（cropData）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回xScale（d.crop）；//我将进行以下更改

首先，在
xScale
中引入
padding
：

var xScale = d3.scaleBand()
  .domain(cropData.map(function(d) {
    return d.crop;
  }))
  .rangeRound([0, w])
  .padding(0.1);

svg.selectAll("rect")
  .data(cropData)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return xScale(d.crop); //<-- place by xScale
  })
  .attr("y", function(d) {
    return yScale(d.records);
  })
  .attr("width", xScale.bandwidth()) //<-- no -5 padding takes care of breaks

这将按带宽的百分之一间隔条

其次，使用
xScale
放置条形图：

var xScale = d3.scaleBand()
  .domain(cropData.map(function(d) {
    return d.crop;
  }))
  .rangeRound([0, w])
  .padding(0.1);

svg.selectAll("rect")
  .data(cropData)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return xScale(d.crop); //<-- place by xScale
  })
  .attr("y", function(d) {
    return yScale(d.records);
  })
  .attr("width", xScale.bandwidth()) //<-- no -5 padding takes care of breaks

svg.selectAll（“rect”）
.数据（cropData）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
return xScale（d.crop）；//谢谢！一系列错误的东西把事情搞砸了！现在看起来不错：-）谢谢！一系列错误的东西把事情搞砸了！现在看起来不错：-）