D3グラフのカーブに目盛りのラベルに間違ったデータがあります

Question

私はD3を使ってグラフを描いています。しかし、x軸の目盛りのラベルが正しく表示されないようです。 （日-15）日曜日の例では、番号は0ですが、0点は、この日のティックではない

データセット：

[{"date":"2017-10-18","count":14},{"date":"2017-10-17","count":32},{"date":"2017-10-16","count":9},{"date":"2017-10-15","count":0},{"date":"2017-10-14","count":8},{"date":"2017-10-13","count":12},{"date":"2017-10-12","count":8},{"date":"2017-10-11","count":15}] 

予想：ダニ日15時点曲線は0 実際なければならない：それはです3

X軸= d3.axisBottom（xScaleは）.ticks（d3.timeDay）.tickFormat（d3.timeFormat（ "％％のD"））;

function InitChart() { 
     console.log(JSON.stringify(data)) 
     $("#visualisation", el).empty(); 
     console.log("DATE"+data); 
     var minDate=new Date (data[data.length-1].date); 
     var maxDate=new Date(data[0].date); 
     function getMax(arr, prop) { 
      var max; 
      for (var i=0 ; i<arr.length ; i++) { 
       if (!max || parseInt(arr[i][prop]) > parseInt(max[prop])) 
        max = parseInt(arr[i][prop]); 
      } 
      return max; 
     } 
     var maxCount = getMax(data, "count"); 
     var vis = d3.select("#visualisation"), 
      WIDTH = 900, 
      HEIGHT = 430, 
      MARGINS = { 
       top: 10, 
       right: 5, 
       bottom: 10, 
       left: 50 
      }, 
      xScale = d3.scaleTime().range([MARGINS.left, WIDTH - MARGINS.right]).domain([minDate, maxDate]); 
      yScale = d3.scaleLinear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, maxCount+30]); 
      xAxis = d3.axisBottom(xScale).ticks(d3.timeDay).tickFormat(d3.timeFormat("%a %d")); 

     yAxis = d3.axisLeft() 
      .scale(yScale) 

     vis.append("svg:g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
      .call(xAxis); 
     vis.append("svg:g") 
      .attr("class", "y axis") 
      .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
      .call(yAxis); 
     var lineGen = d3.line() 
      .x(function(d) { 
       return xScale(new Date(d.date)); 
      }) 
      .y(function(d) { 
       return yScale(d.count); 
      }) 
      // .curve(d3.curveCardinal) 

     vis.append('svg:path') 
      .attr('d', lineGen(data)) 
      .attr('stroke', '#ff6a6a') 
      .attr('stroke-width', 2.5) 
      .attr('fill', 'none'); 
     // vis.append('svg:path') 
     //  .attr('d', lineGen(data2)) 
     //  .attr('stroke', 'red') 
     //  .attr('stroke-width', 2.5) 
     //  .attr('fill', 'none'); 

     var totalLabels = vis.append('g').attr('class', 'totals'); 
     totalLabels.selectAll('.total') 
      .data(data) 
      .enter().append('text') 
      .text(function(d) { 
       // Inject total as text content (stored as d.value) 
       return d.count; 
      }) 
      .style("fill", '#f1e447') 

      .attr('class', 'total') 
      .attr("x", function(d) { 
       // Retrieve the correct vertical coordinates based on the date (stored as d.key) 
       // Plus some pixel offset so that the text is centered vertically relative to bar 
       return xScale(new Date(d.date)); 
      }) 
      .attr("y", function(d) { 
       // Retrieve the horizontal coordinates based on total (stored as d.value) 
       // Add 5px offset so the label does not 'stick' to end of stacked bar 
       return yScale(d.count) -10; 
      }) 

    } 
    InitChart(); 

​​

Answer 1

私はちょうど.setHoursを使用して、新しい日付を使用するときに我々が0に時刻を設定しなければならない答え を見つける（0,0,0,0）のデバッグの助けを求めている