d3.js v4日期坐标轴转换为中文格式

TimeFormat

1.time类型坐标轴的定义域

  1. d3.scaleTime().domain([min,max])minmax是代表定义域范围,在scaleTime中,min的格式只接受标准时间格式;这里就需要将'2012-2-2'或者'2012/2/2'等时间格式转化为标准格式。

  2. d3.timeParse():一定要注意m,d代表的意思,以及大小写。

    let parseTime = d3.timeParse('%Y%m/%d')
       console.log(parseTime('2012/2/2')) 
       //Thu Feb 02 2012 00:00:00 GMT+0800 (中国标准时间)

2.坐标轴Label的显示问题

  1. d3默认支持的是英文日期;

  2. d3.timeFormatLocale()

    let locale = d3.timeFormatLocale({
      dateTime: "%a %b %e %X %Y",
      date: "%Y/%-m/%-d",
      time: "%H:%M:%S",
      periods: ["上午", "下午"],
      days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      shortDays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      shortMonths: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
    });
    //自己构建一套显示格式,注意月份和星期都有全称和缩写,这有就是前文中%d和%D的区别。
     .tickFormat(locale.format("%Y年%b月")));//格式化时间,显示如下图所示

clipboard.png

3.对data数据的格式化处理

    1. 通常数据中时间的格式为2012/2/2,或是2012-2-2等,导入到d3中无法识别,此时需要将此时间转化为标准时间。

    2. 还是利用d3.timeParse(""),将data里面的日期数据转化为标准日期数据。

      let data=[
             {day:'02-11-2016',count:180},
             {day:'02-12-2016',count:250},
             {day:'02-13-2016',count:150},
             {day:'02-14-2016',count:496},
             {day:'02-15-2016',count:140},
             {day:'02-16-2016',count:380},
             {day:'02-17-2016',count:100},
             {day:'02-18-2016',count:150}
         ];
         
      let parseDate = d3.timeParse("%m-%d-%Y");
       data.forEach(d=>{
          d.date = parseDate(d.day);
      });
       …………

      参考:

  • 你可能感兴趣的:(d3.js,数据可视化,坐标)