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

d3.js advent calendar 14日目

d3 javascript adventcalendar

d3 advent calendar 14日目
d3.interpolate

d3.intepolate()

.interpolate()は、15日目で紹介する.transition() (jQueryのanimate的なもの)の内部でも使われている、2つの状態間を計算するAPIです

使い所

  1. 連続的に間を埋める必要が有る時
  2. 連続的な行列が欲しい時
  3. 連続的なオブジェクトが欲しい時
  4. 連続的な色が欲しい時

それ全部出来ます!

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); // 0
interpolate(0.3); // 150
interpolate(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の文字列が得られる

便利さでいうと

  1. d3.interpolateTransform これが相当楽です!
  2. d3.interpolateObject なんだかんだで間を埋めたりに使います

2つを知ってればいいかなぁ