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

TimeFormat

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

1. d3.scaleTime().domain([min,max])中min和max是代表定义域范围，在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月")));//格式化时间，显示如下图所示

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

   参考：

• https://stackoverflow.com/que...；

• https://bl.ocks.org/mbostock/...