TimeFormat
1.
time
类型坐标轴的定义域
d3.scaleTime().domain([min,max])
中min
和max
是代表定义域范围,在scaleTime
中,min
的格式只接受标准时间格式
;这里就需要将'2012-2-2'
或者'2012/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
的显示问题
d3
默认支持的是英文日期;-
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
数据的格式化处理
通常数据中时间的格式为
2012/2/2
,或是2012-2-2
等,导入到d3
中无法识别,此时需要将此时间转化为标准时间。-
还是利用
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);}); …………
参考:
;