刻度應該對應於D3.js中的日期數據點

Question

我在x軸上的刻度與輸入數據中的日期不符。他們休息一天。

我已經嘗試使用nice（），一個固定數量的刻度，並且正在使用timeWeek。我也檢查了域名，它與我的數據相符。

我希望的輸出是每個數據點都有一個記號，即data.length，並且記號標籤應該等於數據[n] .date。

這裏是一個小提琴演示該問題：https://jsfiddle.net/ab2uqfun/

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"); 

Answer 1

什麼你得到預期的行爲。它不會爲每個數據點創建滴答，而是包含數據範圍的「好」滴答數。

如果您想要特定的刻度，您可以使用tickValues而不是ticks並傳入您想要的確切值的數組。