Javascript d3.js为什么轴和数据略有偏移？

我正在用d3.js构建一个条形图，由于某种原因，我的x轴与我的条形图有轻微的错位。我已经仔细检查了我的代码，似乎不知道为什么。我肯定这是件简单的事，但我就是摸不着。有没有可能再给我一双眼睛看看我错过了什么？ JavaScript：

let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

// function fired when state is selected
document.getElementById("state-select").addEventListener("change", (e) => {
//   if there's already a chart, remove it
  let chart = document.getElementById("chart");
  if (chart) {
    chart.remove();
  };
  let state = e.target.value;
//   get state data
  fetch(`https://covidtracking.com/api/v1/states/${state}/daily.json`)
    .then((response) => response.json())
    .then((data) => {
//     sort data by date, chop off initial null value
      data.sort((a, b) => a.date - b.date);
      data = data.slice(1);
//     turn data date strings into date objects
      data.forEach(item => {
        if (item.positiveIncrease < 0){
          item.positiveIncrease = 0
        }
        let dateObject = new Date(item.dateChecked);
        let year = dateObject.getFullYear();
        let month = dateObject.getMonth();
        let day = dateObject.getDate();
        item.dateChecked = new Date(year, month, day);
      });


//     set variables for dimensions and spacing
      const svgWidth = window.innerWidth * .8;
      const svgHeight = window.innerHeight * .8;
      const padding = 40;
      const chartWidth = svgWidth - padding * 2;
      const chartHeight = svgHeight - padding * 2;
      const barSpace = 3;
      const barWidth = chartWidth / data.length - barSpace;

//    build y scale
      const yScale = d3.scaleLinear();
      yScale.domain([
        d3.min(data, (d) => d.positiveIncrease),
        d3.max(data, (d) => d.positiveIncrease),
      ]);
      yScale.range([chartHeight, 0]);

//     build y axis
      const yAxis = d3.axisLeft().scale(yScale);

//     build x scale
      const xScale = d3.scaleTime();
      xScale.domain([d3.min(data, d => d.dateChecked), d3.max(data, d => d.dateChecked)]);
      xScale.range([0, chartWidth]);

//     build x axis
      const xAxis = d3.axisBottom().scale(xScale);

//     add svg to svg wrapper
      const svg = d3
        .select("#svg-wrapper")
        .append("svg")
        .attr("width", svgWidth)
        .attr("height", svgHeight)
        .attr('id', 'chart');

//      add axes
      svg.append('g').attr('transform', `translate(${padding}, ${padding})`).call(yAxis);
      svg.append('g').attr('transform', `translate(${padding}, ${chartHeight + padding })`).call(xAxis);

//     add bars
      let rect = svg
        .selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("width", barWidth)
        .attr("height", (d) => yScale(0) - yScale(d.positiveIncrease))
        .attr("x", (d, i) => i * (barWidth + barSpace) + padding)
        .attr("y", (d) => yScale(d.positiveIncrease) + padding);

//     add title to rects
      rect.append("title").text((d) => {return `${d.positiveIncrease}, ${months[d.dateChecked.getMonth()]} ${d.dateChecked.getDate()}`});

//     add header
      svg
        .append("text")
        .attr("x", 50)
        .attr("y", 50)
        .text(state + " New Cases Daily")
        .style("font-size", "1.5rem")
        .style("font-weight", "bold");
    });
});

让月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
//选择状态时激发的函数
document.getElementById（“状态选择”）.addEventListener（“更改”，（e）=>{
//如果已经有图表，请将其删除
让chart=document.getElementById（“chart”）；
如果（图表）{
chart.remove（）；
};
让状态=e.target.value；
//获取状态数据
取回(`https://covidtracking.com/api/v1/states/${state}/daily.json`）
.then（（response）=>response.json（））
。然后（（数据）=>{
//按日期排序数据，去掉初始空值
data.sort（（a，b）=>a.date-b.date）；
data=data.slice（1）；
//将数据日期字符串转换为日期对象
data.forEach（项=>{
如果（项目正增量<0）{
item.positiveIncrease=0
}
让dateObject=新日期（item.dateChecked）；
让year=dateObject.getFullYear（）；
设month=dateObject.getMonth（）；
let day=dateObject.getDate（）；
item.dateChecked=新日期（年、月、日）；
});
//设置尺寸和间距的变量
const svgWidth=window.innerWidth*.8；
const svgHeight=窗内高度*.8；
常数填充=40；
const chartWidth=svgWidth-padding*2；
常量图表高度=svgHeight-填充*2；
常数棒空间=3；
const barWidth=chartWidth/data.length-barSpace；
//建立y标尺
常量yScale=d3.scaleLinear（）；
yScale.domain([
d3.min（数据（d）=>d.正增量），
d3.最大值（数据，（d）=>d.正增量），
]);
Y刻度范围（[chartHeight，0]）；
//建立y轴
常数yAxis=d3.axisLeft（）.scale（yScale）；
//构建x比例
常量xScale=d3.scaleTime（）；
域（[d3.min（数据，d=>d.dateChecked），d3.max（数据，d=>d.dateChecked）]；
范围（[0，图表宽度]）；
//构建x轴
const xAxis=d3.axisBottom（）.scale（xScale）；
//将svg添加到svg包装器
常量svg=d3
.选择（“svg包装器”）
.append（“svg”）
.attr（“宽度”，svgWidth）
.attr（“高度”，svgHeight）
.attr（'id'，'chart'）；
//添加轴
append（'g'）.attr（'transform'，'translate（${padding}，${padding}）`）.call（yAxis）；
append（'g'）.attr（'transform'，'translate（${padding}，${chartHeight+padding}）`）.call（xAxis）；
//添加条
设rect=svg
.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“类”、“条”）
.attr（“宽度”，barWidth）
.attr（“高度”（d）=>yScale（0）-yScale（d.正增量））
.attr（“x”，（d，i）=>i*（条形宽度+条形空间）+填充）
.attr（“y”，（d）=>yScale（d.正增量）+填充）；
//为矩形添加标题
rect.append（“title”）.text（（d）=>{return`${d.positiveIncrease}，${months[d.dateChecked.getMonth（）]}${d.dateChecked.getDate（）}}}）；
//添加标题
svg
.append（“文本”）
.attr（“x”，50）
.attr（“y”，50）
.文本（状态+“每日新病例”）
.style（“字体大小”、“1.5rem”）
.style（“字体大小”、“粗体”）；
});
});

---

和项目的。

您创建了一个xScale，但没有将其与dateCreated一起使用，而是使用了一个索引

以下是代码的工作版本：

让月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
//选择状态时激发的函数
document.getElementById（“状态选择”）.addEventListener（“更改”，（e）=>{
//如果已经有图表，请将其删除
让chart=document.getElementById（“chart”）；
如果（图表）{
chart.remove（）；
};
让状态=e.target.value；
//获取状态数据
取回(`https://covidtracking.com/api/v1/states/${state}/daily.json`）
.then（（response）=>response.json（））
。然后（（数据）=>{
//按日期排序数据，去掉初始空值
data.sort（（a，b）=>a.date-b.date）；
data=data.slice（1）；
//将数据日期字符串转换为日期对象
data.forEach（项=>{
如果（项目正增量<0）{
item.positiveIncrease=0
}
让dateObject=新日期（item.dateChecked）；
让year=dateObject.getFullYear（）；
设month=dateObject.getMonth（）；
let day=dateObject.getDate（）；
item.dateChecked=新日期（年、月、日）；//这样做是为了消除小时偏移/UTC
});
//设置尺寸和间距的变量
const svgWidth=window.innerWidth*.8；
const svgHeight=窗内高度*.8；
常数填充=40；
const chartWidth=svgWidth-填充；
常量图表高度=svgHeight-填充*2；
//建立y标尺
常量yScale=d3.scaleLinear（）；
yScale.domain([
0,
d3.最大值（数据，（d）=>d.正增量），
]);
Y刻度范围（[chartHeight，0]）；
//建立y轴
常数yAxis=d3.axisLeft（）.scale（yScale）；
//构建x比例
常量xScale=d3.scaleTime（）；
域（[d3.min（数据，d=>d.dateChecked），d3.max（数据，d=>d.dateChecked）]；
范围（[0，图表宽度]）；
//构建x轴
const xAxis=d3.axisBottom（）.scale（xScale）；
//将svg添加到svg包装器
常量svg=d3
.选择（“svg包装器”）
.append（“svg”）
.attr（“宽度”，svgWidth）
.attr（“高度”，svgHeight）
.attr（'id'，'chart'）；
//