ティックはD3.jsの日付データポイントに対応する必要があります

Question

x軸のマイティックは入力データの日付と一致しません。彼らは一日休みです。

nice（）、一定数のダニを使用しようとしましたが、現在timeWeekを使用しています。私もドメインをチェックし、それは私のデータと一致します。

私の希望する出力は、各データポイントの目盛り、すなわちdata.lengthであり、目盛りラベルはdata [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

期待されているあなたが取得している行動：

は、ここで問題を実証フィドルです。各データポイントに対してダニを作成するのではなく、データの範囲をカバーする「いい」数のダニを作成します。

特定のダニが必要な場合は、ticksの代わりにtickValuesを使用し、必要な正確な値の配列を渡すことができます。