D3圖表更改時間格式及其在軸上的顯示

Question

我正在嘗試更改圖表數據集的時間格式

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

我嘗試進行以下操作，但拋出異常：

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;
}

數據正確且具有所需格式，但再次引發異常

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

Answer 1

要在數據中創建日期條目，只需使用d3.time.day.offset(now, offset++)將1天的偏移量添加到now d3.time.day.offset(now, offset++)

嘗試這些對我有用的模塊，至少是X軸標簽的日期格式：

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);

Answer 2

您可以使用.tickFormat（d3.time.format（“％A％Y-％m-％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