d3js/覚えておきたいmethods

覚えておきたいmethods

scale

数値のスケール変換関数. 変換のタイプ(linearとか)に合わせたコンストラクタっぽいので関数を作り、入力domainと出力rangeを関数のsetterでセットして完成。

var xScale = d3.scale.linear();
xScale.domain([0,100])
      .range([0,10]);

これで

 in[0] xScale(50)
out[0] 5

になる。

レンジ外の出力は

xScale.clamp(true)

とするとレンジの最大/小値に固定される。

ほかのscaleタイプは

• identitiy
• sqrt
• pow
• quantize
• quantile
• ordinal

など

axis

軸の生成関数. axis()コンストラクタで生成関数をつくり、適用するscaleや目盛りをsetterでセットしたのち、call()関数で軸の実体(svg要素群)が返ってくる.

var xAxis = d3.svg.axis(); // axis生成関数の作成
xAxis.scale(xScale) // 事前に準備した"xScale"のセット
     .orient("bottom") // 軸の位置指定
     .ticks(5) // 目盛り数の目安を5に設定
     .tickValues(); // 目盛りを明示的に指定する(今回はなし、引数が[1,10,100]ならこの3点に目盛りがつく)

axisの更新

axisはscale値を参照で持っているようである. よってaxisをcallしたのち、scaleの変更をし、さらにcallし直すと更新が可能. またaxisの設定(orientなど)もcallし直しで更新可. transitionも使える. すごいね、d3js!!

extent

extent == [d3.min(), d3.max()]
こんな感じ. scaleの最大・小を設定するときに非常に便利. d3.extent(array[, accessor])