2012-12-16 d3.js advent calendar 14日目 d3 javascript adventcalendar d3 advent calendar 14日目d3.interpolate d3.intepolate() .interpolate()は、15日目で紹介する.transition() (jQueryのanimate的なもの)の内部でも使われている、2つの状態間を計算するAPIです 使い所 連続的に間を埋める必要が有る時 連続的な行列が欲しい時 連続的なオブジェクトが欲しい時 連続的な色が欲しい時 それ全部出来ます! 2つのNumberの間を[0, 1]の間で埋めるのはfunction(a, b){ return function(t){ t = Math.max(0, Math.min(1, t)); return a * t + b * (1 - t);}}ってすれば簡単ですが、2.の配列や3.のオブジェクトは結構めんどうです。色とかも 使い方 var interpolate = d3.interpolate(0, 500);interpolate(0); // 0interpolate(0.3); // 150interpolate(1); // 500 API d3.interpolate()ってすれば適当な下位APIが選ばれ補間関数が返ってきますが、紹介しておきます d3.interpolateNumber() 一番基本 d3.interpolateRound() 返却される値が整数 d3.interpolateString() 数値の文字列表現が可能(1.3E2みたいな) d3.interpolateArray() [0,100]と[1000, 0]の間の配列を得ることができる d3.interpolateObject() {x:0, y:1000}と{x:30, y:0}の間のオブジェクトを得ることができる d3.interpolateRgb() 文字通り d3.interpolateTransform() transformの文字列が得られる 便利さでいうと d3.interpolateTransform これが相当楽です! d3.interpolateObject なんだかんだで間を埋めたりに使います 2つを知ってればいいかなぁ