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

d3.js advent calendar 3日目

d3 javascript adventcalendar

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

d3.js Advent Calendar 3日目
Array API (1/2)

Array API

  • JavaScript の Arrayのおさらい
  • d3のArray API (この部分2回に分けます)

Array API はいくつもあります

ですが、mike bostockはこうおっしゃっています

まず、JSのArrayで実装されてる奴よく読め

Array.

  • Array.reverse
  • Array.shift
  • Array.sort
  • Array.splice
  • Array.unshift
  • Array.concat
  • Array.join
  • Array.slice
  • Array.indexOf
  • Array.lastIndexOf

Array. (続き)

  • Array.filter
  • Array.forEach
  • Array.every
  • Array.map
  • Array.some
  • Array.reduce
  • Array.reduceRight

slice / splice

Dan氏もかく語りきspliceとsliceはすごく便利です

実例:slice

var data = getLargeData(); // more than 1M records
createChart(data); // x spent much time!!
var limit = ENV === "develope" ? 1000 : data.length - 1;
createChart(data.slice(0, limit)); // in developement use small size thus spent less time!

d3で追加されたArray API (1)

  • d3.ascending(a, b)
  • d3.descending(a, b)

よくあるsortと同じ

d3で追加されたArray API (2)

  • d3.min(a[, accessor])
  • d3.max(a[, accessor])

Math.min / Math.maxと同じだけど、accessorを使うことで、オブジェクトの要素とかで比較できます

実例: d3.min

var a = [{v:3, s:4},{v:2, s:1},{v:1, s:5},{v:2, s:2}];
d3.min(a, function(d){ return d.v}) // → 1 ({v:1,s:5}ではない)

d3で追加されたArray API (3)

  • d3.extent(a[, accessor])
  • d3.first(a[, comparator])
  • d3.last(a[, comparator])

最小/最大を2要素の配列で返却する
表示範囲を求めるときなどに便利!

実例: d3.extent

var a = [{v:3, s:4},{v:2, s:1},{v:1, s:5},{v:2, s:2}];
d3.extent(a, function(d){ return d.v}) // → [1, 3]
d3.extent(a, function(d){ return d.s;}) // → [1,5]

d3で追加されたArray API (4)

  • d3.sum(a[, accessor])
  • d3.mean(a[, accessor])
  • d3.median(a[, accessor])
  • d3.quantile(numbers, p): 確率pの数値を返す
  • d3.bisectLeft(a, x[, lo[, hi]]): ソートされた配列aにxを代入するときの位置を返す
  • d3.bisect(a, x[, lo[, hi]])
  • d3.bisectRight(a, x[, lo[, hi]])
  • d3.bisector(accessor)

d3で使えるHash API

  • d3.keys(object)
  • d3.values(object)
  • d3.entries(object)

.keys, .valuesは言わずもがなですが、.entriesはなにげに便利です

実例:d3.entries

var data = {name: "muddydixon", age: 34, job: "web engineer"};
d3.entries(data);
// [{key: "name", value: "muddydixon"}, {key: "age": value: 34}, {key: "job", value: "web engineer"}]

d3で使えるMap API

d3ではmapを使うことができます

  • d3.map(object): map constructor
  • map.has(key)
  • map.get(key)
  • map.set(key, value)
  • map.remove(key)
  • map.keys()
  • map.values()
  • map.entries()
  • map.forEach(function)