2012-12-04 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 recordscreateChart(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)