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」座標に付与します:

ハンドルの目盛り上の位置の信号を設定
ハンドルの位置をピクセル値で示してもあまり役に立ちません - グラフのハンドルには図に有用な、例えば「年」のような位置を設定するほうが使いやすいからです. Vegaのスケール（目盛り）は、データ（例＝年）を画面上の座標に変換したり戻したり（インバート）する便利な仕掛けがあります. この段階では1960から2013までの線的なスケール「yearsScale」を付け加え、グラフの幅いっぱいにマッピングします（パッディングを除外）. さらにscaledHandlePosition信号も新たに加え、マウスを置いた座標Xを「年」に変換します.

「年」の値のクリーンアップ
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:

クリーンアップして仕上げ
いよいよデバグ用のマークをすべて削除できます. また同じステップでスケールを決めるので、handlePositionとscaledHandlePositionの信号も無用です:

次のステップ
パート2へ続く