スポンサーリンク
スポンサーリンク

散布図でツールチップを表示してみる

グリッド上に配置されている円「●」にマウスカーソルがのったとき、ツールチップを表示します。グラフ上で表現できる情報には限りがあります。より多くの情報を表示したいときはツールチップが便利です。

サンプルコードの実行結果はこちら

ツールチップはDOM要素を利用して表示するので、以下ようにスタイルシートを設定します。

表示するツールチップは、予めHTMLファイル内にdiv要素を用意することができますが、今回はプログラムを利用して生成します。

サンプルコードの実行結果はこちら

要素の生成にはいつも通りappend()メソッドを使います。DOM要素もappend()メソッドで生成することができます。attr()メソッドで、HTML側で書いた、class属性に「tip」CSSクラス名を設定します。

散布図の円に関するデータはcircleElementsに格納されていますので、それに.on()メソッドを使い、マウスカーソルが重なった時の処理を書きます。

上記のon()メソッドで設定したイベントハンドラ(関数)には、マウスカーソルが重なった要素(今回は円)のデータが渡されます。このデータはdata()メソッドにより設定されたデータです。ということは、datumd()メソッドを利用して読み出すことができるデータです。

座標軸を整数に変換する。

円データはdatum()メソッドで読み出す。

ツールチップの内容を書き換えるのはtext()メソッドでできます。

マウスカーソルが離れたらツールチップを非表示にする処理です。

コメント

タイトルとURLをコピーしました