覚えておきたい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])
