Javascript 刻度应与D3.js中的日期数据点相对应

x轴上的刻度与输入数据中的日期不对应。他们休息一天

我尝试过使用nice（），一个固定数量的刻度，目前正在使用timeWeek。我还检查了域，它与我的数据匹配

我希望的输出是每个数据点都有一个记号，即data.length，记号标签应该等于data[n].date

下面是一把小提琴，展示了这个问题：

---

你得到的是预期的行为。它不会为每个数据点创建记号，而是覆盖数据范围的“不错”记号数

如果需要特定的刻度，可以使用

tickValues

而不是

ticks

，并传入所需的精确值数组

var data = [
             {"date": "04/03/2017", "val": 3},
             {"date": "04/10/2017", "val": 6},
             {"date": "04/17/2017", "val": 7},
             {"date": "04/24/2017", "val": 5},
             {"date": "05/01/2017", "val": 8}
           ];

var parseTime = d3.timeParse("%m/%d/%Y");

data.forEach(function(d) {
    d.date = parseTime(d.date);
  d.status = +d.status;
});

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

        var xScale = d3.scaleTime()
                .domain(d3.extent(data, function(d) {
            return d.date;
        }))
            .range([0, width]);

        var yScale = d3.scaleLinear()
            .domain([1, 9])
            .range([height, 0]);

    var plot = d3.line()
            .x(function(d) { return xScale(d.date); })
            .y(function(d) { return yScale(d.val); })
            .curve(d3.curveMonotoneX);

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

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xScale).ticks(d3.timeWeek.every(1)));

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

        svg.append("path")
            .datum(data)
        .attr("id", "plot")
            .attr("class", "line")
        .attr("stroke", "#FF69B4")
            .attr("d", plot);

        svg.append("text")
        .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")
        .style("text-anchor", "middle")
        .text("Date");

        svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x",0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Value");