2016-01-13 70 views
0

我試着去改變圖表的數據集合的時間格式時間格式,其顯示D3圖表改變軸

https://jsfiddle.net/d0ogL90d/2/

心中已經嘗試做follwoing但異常拋出:

var xExtents = d3.extent(d3.merge(dataset), function (d) { 
    return return d3.time.format('%A %m/%d/%y')(new Date(d.x)); 
}); 

如果被返回DX然後它顯示日期而不是在期望的格式

我還試圖通過改變數據陣列:

function createADateArray(){ 
    var arr = []; 
    temparr = []; 

    var date = new Date(); 
    arr.push(temparr); 
    temparr = []; 
     for(i=1; i < 6; i++){ 
     var date2 = date.setDate(date.getDate() + 1); 
     var cdate = d3.time.format('%A %m/%d/%y')(new Date(date2)) 
     var obj = { 
     'x': cdate, 
     'y': i 
     } 
     temparr.push(obj);  
    } 
    arr.push(temparr); 

    // } 

    return arr; 
} 

的數據是正確的ANF與所需的格式,但再一次例外是投擲

*所需的格式: 星期二 1月10日

回答

0

要在您的數據創建日期項,只需添加1一天偏移使用d3.time.day.offset(now, offset++)

嘗試這些MODS這些工作對我來說,至少在X軸標籤的日期格式您now VAR:

var now = d3.time.hour.utc(new Date); 

function createADateArray(){ 
    var arr = []; 
    temparr = []; 

    // var date = new Date(); 
    //for(j=0; j< 4; j++){ 
    /*for(i=0; i < 1000; i++){ 
     var obj = { 
     'x': i, 
     'y': i 
     } 
     temparr.push(obj);  
    arr.push(temparr); 
    }*/ 
    temparr = []; 
     // for(i=1004; i < 2000; i++){ 
     var offset = 0; 
     for(i=1004; i < 1010; i++){ 
     //var date2 = date.setDate(date.getDate() + 1); 
     //date = new Date(date2); 
     var obj = { 
     // 'x': date, 
     'x': d3.time.day.offset(now, offset++), 
     'y': i 
     } 
     temparr.push(obj);  
    } 
    arr.push(temparr); 

    // } 

    return arr; 
} 
... 
// d3.time.format("%A %B"); 
var dateFormat = d3.time.format("%a %b %e %I%p"); 

var xScale = d3.time.scale() 
     // .domain([new Date(xExtents[0]), d3.time.day.offset(new Date(xExtents[xExtents.length - 1]), 1)]) 
     .domain(xExtents) 
     .range([padding, w - padding * 6]); 
... 
//Define X axis 
var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("bottom") 
    .tickFormat(dateFormat); 
    // .ticks(1000); 
0

可以使用.tickFormat(d3.time.format( 「%A%Y-%間 - %d」))

var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom") 
      .tickSize(-height) 
      .tickFormat(d3.time.format("%A %Y-%m-%d")) 
      .ticks(5); 

http://codepen.io/anon/pen/mVMjvm?editors=101