前回はここ
今回は、interactiveなグラフを書いていきます。
カーソルを合わせた時に色を変える
バーチャートのバーにカーソルを合わせた時に赤色に変え、外すと青色に変えます。
カーソルを合わせた時に色が変わるのは、 encode プロパティにhoverを追加することで実現しています。
hover 属性で色を更新するだけだと、カーソルを外した時でも色が変わったままになりません。
そのため、enter プロパティにあった色の設定を、update に移動することで、変更を感知して色を戻るようにしています。
カーソルを合わせた時にテキストを表示する
バーにカーソルを合わせた時に、バーの上に数字を表示します。
signals と text typeのMarkを追加することで実現します。
signals を追加しています。これは、変数のようなもので動的に値を変更できます。
ここでは、marks の rect に対するイベントによって値を変更します。バーにカーソルを合わせた時に、合わせたバーのデータでsignals の値をアップデートしています。これは、Vega EditorのSignal View Window で値が変わっていくことを確認できます。
なお、rect の代わりに、name で指定した値を直接指定することもできます。
"on": [
{"events": "@layer_0:mouseover", "update": "datum"},
{"events": "@layer_0:mouseout", "update": "{}"}
]
これで、Vega Examples にある一番最初のBar Chart とほぼ一緒になります。
次回は、時系列データ です。