D3图表更改时间格式及其在轴上的显示

Question

Im trying to change the time format of the data set of the charts

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

I'v tried to do the follwoing but exception is throwing:

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

if dx is been returned then it display date but not in the desired format

I also tried to change the data array by:

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

The data is correct anf with the desired format but again exception is throwing

*desired format: Tue Jan 10

Answer 1

To create your date entries in your data, just add 1 day offsets to your now var using d3.time.day.offset(now, offset++)

Try these mods which are working for me, at least the date format of the X-axis labels:

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

you can use .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