x軸日期不與nvd3中的y軸數據對齊

我在燒瓶上使用NVD3，並且我在x軸上有日期。 enter image description here x軸日期不與nvd3中的y軸數據對齊

正如您可以看到x軸上的線條與點不重合。我在x軸上打印出日，月，年和小時。我不明白爲什麼日期不等間隔，即使我的X軸數據是「小時」也不相同，因此線條間隔超過「24小時」。我認爲這是造成這個問題的原因。

（編輯）我的代碼是：

nv.addGraph(function() { 
         var chart = nv.models.lineChart(); 
         chart.xAxis 
          .tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) } 
       ); 
         chart.yAxis 
          .tickFormat(d3.format(',.02f')); 
         chart.tooltipContent(function(key, y, e, graph) { 
          var x = d3.time.format('%d %b %Y')(new Date(parseInt(graph.point.x))); 
          var y = String(graph.point.y); 
       var y = String(graph.point.y); 
          tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x; 
          return tooltip_str; 
         }); 
         chart.showLegend(true); 

         d3.select('#lineChart svg') 
          .datum(data_lineChart) 
          .transition().duration(500) 
          .attr('width', 1200) 
       .attr('height', 450) 
          .call(chart); 

        nv.utils.windowResize(chart.update); 
        return chart; 
       });

來源

2013-10-30 Lyman Zerga

好的，明白了！我所做的是創建一個時間戳列表，它將用作x軸上的數據並將它們四捨五入到最近的一天。然後我強迫NVD3做使用該數據的時間間隔，而不是自動生成的時間間隔：

chart.xAxis 
    .tickValues({{x_data}})

其中x_data是列表。瞧！ ......嗯，如果它沒有宣佈時間表

Plot with aligned intervals

來源

2013-11-01 00:47:43

或某些（如我自己）'chart.xAxis.tickValues（x_ticks）;'。非常有幫助，謝謝 –

~~您可以明確地控制蜱是如何生成的。有蜱24小時分開，代碼會像~~

~~chart.xAxis.ticks(d3.time.day, 1);~~

編輯

它看起來像NVD3實際上並不使用D3軸分量產生的標籤，因此所有這些都沒有影響。你將不得不修改NVD3的來源，以達到你想要的。

來源

2013-10-30 18:10:32

我是一個完整的初學者，能否請你告訴我在代碼中的位置？當我把它放在'chart.xAxis'下時，圖不會顯示' –

把它放在'chart.yAxis'之前。 –

我試過，仍然沒有變化：/ –

這裏D3更好的建議沒有規模按日期代表x軸。

chart.xAxis 
     .tickFormat(function(d) { 
      return d3.time.format('%d-%m-%y')(new Date(d)) 
     }); 

    chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph

來源

2014-03-08 09:26:26 rtexal

這應該是公認的答案，因爲它是一個實際的修復程序，不需要手動設置X刻度。 – PLPeeters

x軸日期不與nvd3中的y軸數據對齊

回答

相關問題