2016-04-04 6 views
1

x軸に日付が表示される折れ線グラフを作成しています。グラフがうまくいきますが、日付の目盛りがちょっと混乱しています。それは、日付をスキップします! https://jsfiddle.net/Tanakrit/k0vr99fd/NVD3:X軸チックとして日付を使用するときの奇妙な動作

上記の例では、x軸に8つのティックがあることがわかります。tickFormatでプリントアウトしましたが、そこに表示されることがわかりました3月25日に2つになるため、実際にはちょうど7チックしか表示されません。

tickFormatの機能がdの入力を実際にグラフに与えた値のように見えなかったため、その機能がどのように入力されているか分かりません。

答えて

1

あなたはこのようにそれを行うことができます。

var data_full = data();//get all data 
var secondDate = d3.max(data_full[0].values, function(d){ return new Date(d.x)});//get the max date 
var firstDate = d3.min(data_full[0].values, function(d){return new Date(d.x)}); get min date 
var between = []; 
//get all dates between max and min date 
while (firstDate <= secondDate) { 
    between.push(new Date(firstDate)); 
    firstDate.setDate(firstDate.getDate() + 1); 
} 
chart.xAxis 
    .axisLabel('Time (days)') 
    .rotateLabels(-55) 
     .tickValues(between)//set all dates manually with tickValues. 
    .tickFormat(function(d) { 
     return d3.time.format('%b %d')(new Date(d)); 
    }) 
    ; 

作業コードhere

関連する問題