読者です 読者をやめる 読者になる 読者になる

d3.js advent calendar 4日目

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

d3 advent calendar 4日目

d3にあるその他の Array Operatorの紹介

特筆すべきは、d3.rangeとd3.nestです。特にnestは非常に有用なので覚えて損はないです!

d3.split

最初のnull / undefinedで分割され、それまでの配列が返される。functionが定義されていれば、trueを返すまでの配列が返される

実例:d3.split

var array = d3.range(0, 100, 5); // [0, 5, 10, ... , 95, 100]
d3.split(array); // [0, 5, .., 100] nullもundefinedも無いから
d3.split(array, function(d){ return d > 50; }); // [0, 5, 10, .., 50]

d3.range([start, ]stop[, step])

startがなければ0、stepがなければ1ずつでstopまでの配列を返す便利関数

実例:d3.range

d3.range(50) // [0, 1,...,50]
d3.range(25, 50) // [25, 26, .., 50]
d3.range(25, 50, 5) // [25, 30, 35, .. , 50]

補足:d3.time.days(start, stop[, step])

日時で.rangeと同じことができます!これ、便利です

d3.time.days(new Date(2012, 0, 1), new Date(2012, 1, 1))
// [Sun Jan 01 2012 00:00:00 GMT+0900 (JST),Sun Jan 02 2012 00:00:00 GMT+0900 (JST)..,Tue Jan 31 2012 00:00:00 GMT+0900 (JST)]
d3.time.days(new Date(2012, 0, 1), new Date(2012, 1, 1), 7)
// [Sun Jan 01 2012 00:00:00 GMT+0900 (JST),Sun Jan 08 2012 00:00:00 GMT+0900 (JST)..,Tue Jan 31 2012 00:00:00 GMT+0900 (JST)]

d3.nest()

これはすごく便利です。視覚化したいデータは大抵、オブジェクトの配列だと思います
これを特定のkeyでネストすることが可能です
d3.nest()でnestオブジェクトを作成し、.key(function)でネストのkeyを定義します
最後に.entities(data array)で渡し、ネストされた配列を得ることができます

実例:d3.nest()

var data = [
{year: 1992, item: 1},
{year: 1995, item: 1},
{year: 1992, item: 3},
{year: 1996, item: 3},
{year: 1996, item: 3}];
d3.nest()
.key(function(d){return d.year;})
.key(function(d){return d.item;})
.entries(data);

実例:d3.nest() 続き

// [
// {key: 1992, values: [
// {key: 1, values: [{year: 1992, item: 1}]},
// {key: 3, values: [{year: 1992, item: 3}]}
// ]},
// {key: 1995, values: [
// {key: 1, values: [{year: 1995, item: 1}]}
// ]},
// {key: 1996, values: [
// {key: 3, values: [{year: 1996, item: 3}]}
// ]}
//]

その他

  • d3.merge(array's array): 正直[].concatで十分
  • d3.permute(array, indexes): arrayの中身をindexesの順序で並び替えてくれる
  • d3.zip(arrays): underscore.zipと同じ