Extension:Graph/Interactive Graph Tutorial/ja

このチュートリアルではインタラクティブなグラフの作成方法を説明するため、国ごとの出生率の変化を例題とします. 表示する年を選ぶスライダーを設定し、地図を使って世界の出生率の分布を示します. このグラフ限定のソースコードは独立したページavailable as a separate wiki pageで調べてください. インタラクティブなグラフのサンドボックスInteractive Graph Sandboxで使い方を実験できます. またVegaの説明文書全文complete Vega documentationにも興味があるかもしれません.

図形を描くには
まずいくつかの要素を描くところから始めます（marks）. タグで挟まれた部分がグラフ用コードで、グラフがインタラクティブでなくても見た目は同じです. インタラクティブなグラフのサンドボックスInteractive Graph Sandboxを開き、以下のコードから&lt;graph>タグ以外の部分をコピーして実験を始めましょう.

ヒント: 実験用にグラフのスペックをVega Editorにコピーするには、編集ではなく「ソースを編集」を押します.

IsDragging 信号
ハンドルのオブジェクトをマウスで移動できるように、まずクリックの有無を検出する方法を考えます. そこで信号signalを追加して、クリックすると真に変わり (isDragging) 結果を示す文を表示する (debug) ことにします:

ハンドルの位置決めの信号
前節でオブジェクトにマウスが当たったかどうか検知したので、次に 信号を追加し、isDragging信号が真のときだけ変化するよう設定します. 作ったばかりの信号は「update」部でハンドルの「x」座標に付与します:

Scaling Handle Position signal
Having pixel position of the handler is not very good - we would much rather have a position that is meaningful to our graph, e.g. a year. Vega scales provide a useful mechanism for converting between our data (e.g. years) and the screen coordinates, and back (invert). In this step, we add "yearsScale" linear scale for values 1960..2013, mapping it to the whole width of the graph (excluding padding). We also add a new scaledHandlePosition signal that translates from the mouse X position to the meaningful value in years.

Year value cleanup
As you might have noticed, the handle could be moved beyond the length of our graph, producing incorrect results. Also, the scaled value is not an integer that we expect of the year value. To fix this, we can introduce one more post-processing signal called "currentYear" to convert it to an integer and limit it to the needed range. We also initialize it to a reasonable value, and we tie both the "yearLabel" and the position of the handle bar back to this value. Note that the handle's position needs to be in screen coordinates, so we have to use the "yearsScale" to convert the value back:

Final cleanup
Now we can remove all the debugging marks. We also don't need separate handlePosition and scaledHandlePosition signals because scaling can happen in the same step:

Next Step
Please continue to part 2