d3.js advent calendar 9日目

これは、d3.js API Advent Calendarの9日目の記事です

d3.js advent calendar 9日目

d3.time

  • d3.time.format
  • d3.time.scale
  • d3.time.interval

大きく3つのAPIにわかれますが、特筆すべきはintervalです。これだけ覚えていればいいです!

d3.time.format

Dateオブジェクトから指定した文字列への変換、また、逆に文字列からDateオブジェクトへの変換を行うことができます
まあ、一般的なやつです

実例

var format = d3.time.format("%Y/%m/%d %H:%M:%S");
format(new Date(2012, 0, 15));
// "2012/01/15 00:00:00"
format.parse(2013/11/11 01:23:45");
// Mon Nov 11 2013 01:23:45 GMT+0900 (JST)
format.parse("20133/11/11 01:23:45");
// null for invalid format

d3.time.scale

d3.scaleのDateオブジェクト版です
ここでも.nice()と.tick()は役に立ちます

実例

var scale = d3.time.scale()
.domain([new Date(2008, 0, 15, 3), new Date(2012, 6, 12)])
.range([0, 400]); // グラフの横幅(px)
var scale2 = d3.time.scale()
.domain([new Date(2008, 0, 15, 3), new Date(2012, 6, 12)])
.nice(d3.time.week); // 後述するintervalの1つ
scale2.domain();
// [Sun Jan 13 2008 00:00:00 GMT+0900 (JST), Sun Jul 15 2012 00:00:00 GMT+0900 (JST)]

d3.time.interval

.intervalは、.day()や、.week()、.month()、friday()などを指し、様々な時間のaliasや単位の変換が容易に出来ます
例えば、入力のDateオブジェクトを時分秒を0にしたり、週頭で揃えたり、月頭に揃えたりが可能です

実例

var d = new Date(2012, 11, 6, 23, 52, 15);
// Thu Dec 06 2012 23:52:15 GMT+0900 (JST)
d3.time.day(d);
// Thu Dec 06 2012 00:00:00 GMT+0900 (JST)
d3.time.week(d);
// Sun Dec 02 2012 00:00:00 GMT+0900 (JST)
d3.time.month(d)
// Sat Dec 01 2012 00:00:00 GMT+0900 (JST)
d3.time.year(d);
// Sun Jan 01 2012 00:00:00 GMT+0900 (JST)

時間の扱い簡単にできるので素敵です!d3.time可愛いです