サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
d3js.hatenadiary.jp
可視化コンテンツではズームやパンが必要になることが多いが、実装はなかなか面倒なもの。しかし心配は不要。d3.jsには強力なズーム&パン機能が備わっている。このAPIが、d3.behavior.zoom() だ。 参考:Zoom Behavior · mbostock/d3 Wiki · GitHub 例: SVG Geometric Zooming 1.zoomに設定できるもの まず、zoom APIの設定パラメータ。 # zoom(selection) 指定したセレクションにzoomビヘイビアを設定する。 d3.behavior.zoom(selection)としてもよいが、よりd3.js的な'Chain Syntax'で書くと、 selection.call(d3.behavior.zoom().以下略)となる。 このselectionがズームイベントのイベントリスナとなる。 # zo
あるデータのスケーリングは、.domain().range()の組み合わせで行う。範囲[a,b]の入力を、範囲[p,q]の出力に変換するスケーリング関数の基本形は次の通り。 var scale = d3.scale.種類 .domain([a,b]) .range([p, q]);.domain([a,b])は入力値の範囲、.range([p,q])は出力(描画)の範囲を指定する。 連続数に対するスケールの「種類」は次がある 種類 変換方法 linear 線形 log 常用対数(底は10) pow 指数 肩は.exponent(x)で指定 sqrt 平方根 .pow().exponent(0.5)と同じ quantize 連続な入力(domain)を離散的な出力(range)に変換 quantile カテゴリーに分類された入力を離散的に出力 threshold あらかじめ入力データの範囲が
このページを最初にブックマークしてみませんか?
『d3js.hatenadiary.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く