D3圖表曲線在刻度標籤中有錯誤的數據

我使用D3繪製圖表。但x軸上的刻度標籤似乎無法正確顯示。例如，在週日，數量爲0，但0點不在這一天的蜱（星期日-15）D3圖表曲線在刻度標籤中有錯誤的數據

數據集：

[{"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

XAXIS = 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();

來源

2017-10-18 Mike

問題尋求幫助調試時的時間設置爲0 （「爲什麼這個代碼不工作？」）必須包含所需的行爲，特定的問題或錯誤以及重現它所需的最短代碼。 – Mark

我的野驢猜測在這裏，是你的勾號是在星期天**午夜**而你的數據點是星期天幾個小時到一天...... – Mark

不，數據點的格式是YYYY-MM-DD [{ 「日期」：「2017年10月18日」，「計數」：15}，{ 「日期」：「2017年10月17日」，「計數」：32}，{「日期「：」 2017年10月16" 日，「計數」：9}，{ 「日期」：「2017年10月15日」，「計數」：0}，{ 「日期」：「2017年10月14日」，「計數」：8}，{ 「日期」：「2017年10月13日」，「計數」：12}，{ 「日期」：「2017年10月12日」，「計數」：8}，{「日期「：」二○一七年十月十一日「，」算「：15}] – Mike

我只是找到了答案我們必須用新的日期使用.setHours（0,0,0,0）

來源

2017-10-18 15:27:54 Mike

D3圖表曲線在刻度標籤中有錯誤的數據

回答

相關問題