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/...