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