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

时间:2016-01-13 06:16:40

标签: d3.js

我试图更改图表数据集的时间格式

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

我试图做下面的事情,但例外是投掷:

create table table1(
id int identity(1,1), 
id_table2 int,
id_table3 int);

create table table2 (
id int identity(100,1),
val varchar(20));

create table table3 (
id int identity(200,1),
val varchar(20));

declare @varTable2 table (LastID int);
declare @varTable3 table (LastID int);

insert into table2 
output inserted.id into @varTable2 values ('a');

insert into table3 
output inserted.id into @varTable3 values ('a');

insert into table1 (id_table2, id_table3)  values
( (select LastID from @varTable2), 
  (select LastID from @varTable3)
  );

  select * from table1

如果已返回d.x,则显示日期但不是所需的格式

我还尝试通过以下方式更改数据数组:

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

数据是正确的,并且具有所需的格式,但是再次抛出异常

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

2 个答案:

答案 0 :(得分:0)

要在数据中创建日期条目,只需使用now

为您的d3.time.day.offset(now, offset++) var添加1天的偏移量

尝试这些适合我的mod,至少是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);

答案 1 :(得分:0)

你可以使用.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