Javascript d3中线条图的x轴上打印错误的日期，带有额外的勾号

我使用D3在JavaScript中绘制线图。线条图绘制的是右侧，但x轴上的日期不正确，并且在x轴上还显示了一个额外的记号。我也尝试过改变勾号格式，但失败了。我不知道我哪里做错了。请帮忙。这是我的密码

var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width 
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// The number of datapoints
var n = 4;
var xScale = d3.scaleLinear()

    .domain([0, n-1]) // input
    .range([0, width]); // output

var parseTime = d3.timeParse("%d-%b-%y");   

// 6. Y scale will use the randomly generate number 
var yScale = d3.scaleLinear()

    .domain([0, 100]) // input 
    .range([height, 0]); // output 


    d3.csv("Data_vis.csv", function(data){
   //console.log(data);

    var nov_11_percent= 22;
    var oct_16_percent= 25;
    var nov_13_percent= 24;
    var oct_22_percent= 21;

    var dataset2=[{"date":'2018-09-11', "value": nov_11_percent},
            {"date":'2018-10-16', "value": oct_16_percent},
            {"date":'2018-10-22', "value": oct_22_percent},   
            {"date":'2018-11-13', "value": nov_13_percent}];


 dataset2.forEach(function(d) {
      d.date = new Date(d.date);

  });   

var line = d3.line()
    .x(function(d, i) {
     //alert(parseTime(d.date));
    return xScale(d.date);

    }) 
    .y(function(d,i ) { 


    return yScale(d.value);

    }) 
    .curve(d3.curveMonotoneX) 

 xScale.domain(d3.extent(dataset2, function(d) { 

    return d.date; })); 

    yScale.domain([0, d3.max(dataset2, function(d) { 

    return d.value;

    })]);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")

.call(d3.axisBottom(xScale)
.ticks(4)
 .tickFormat(d3.timeFormat("%Y-%m-%d")));

svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale)); 

svg.append("path")
    .datum(dataset2) 
    .attr("class", "line") 
    .attr("d", line); 

svg.selectAll(".dot")
    .data(dataset2)
  .enter().append("circle") // Uses the enter().append() method
    .attr("class", "dot") // Assign a class for styling
    .attr("cx", function(d) { return xScale(d.date) })
    .attr("cy", function(d) { return yScale(d.value) })
    .attr("r", 10);
});

任何帮助都将不胜感激。谢谢

用a代替线性刻度表示x

var xScale = d3
  .scalePoint()
  .range([0, width])
  .domain(dataset2.map(i => i.date))

const margin={top:50，right:50，bottom:50，left:50}
const width=window.innerWidth-margin.left-margin.right//使用窗口的宽度
const height=window.innerHeight-margin.top-margin.bottom//使用窗口的高度
const数据集2=[{日期：“2018-09-11”，数值：22}，{日期：“2018-10-16”，数值：25}，{日期：“2018-10-22”，数值：24}，{日期：“2018-11-13”，数值：21}]
数据集2.forEach（函数（d）{
d、 日期=新日期（d.日期）
})
// 6. Y刻度将使用随机生成的数字
常数yScale=d3
.scaleLinear（）
.域名([
0,
d3.max（数据集2，函数（d）{
返回d值
})
])//输入
.range（[height，0]）//输出
常数xScale=d3
.scalePoint（）
.范围（[0，宽度]）
.domain（dataset2.map（d=>d.date））
常数线=d3
.第（）行
.x（功能（d，i）{
返回xScale（d.date）
})
.y（功能（d，i）{
返回Y刻度（d值）
})
.curve（d3.curveMonotoneX）
常量svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
svg
.附加（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.打电话(
d3
.axisBottom（xScale）
.tickFormat（d3.timeFormat（“%m/%d”））
)
svg
.附加（“g”）
.attr（“类”、“y轴”）
.call（d3.axisLeft（yScale））
svg
.append（“路径”）
.基准（数据集2）
.attr（“类”、“行”）
.attr（“d”，行）
.attr（“填充”、“无”）
.attr（“笔划”、“黑色”）
svg
.selectAll（“.dot”）
.数据（数据集2）
.输入（）
.append（“圆”）//使用enter（）.append（）方法
.attr（“class”，“dot”）//为样式指定一个类
.attr（“cx”，功能（d）{
返回xScale（d.date）
})
.attr（“cy”，函数（d）{
返回Y刻度（d值）
})
.attr（“r”，10）

---

成功了，非常感谢您的帮助：）您能告诉我如何将x轴上的第一个记号向右移动一点，而不是从零开始。再次感谢：）没问题。也许最好接受这个答案，然后在一个新的问题中问这个问题，并将其链接到这里。好的，我会邀请你回答我的新问题。谢谢：）