D3.js v5 入門|#6 棒グラフにツールチップを表示する

d3.js(v5) で描画した棒グラフにツールチップを表示する方法について記載します。

実装すると、次のようにマウスオーバー時にツールチップを表示することができます。

Demoを表示

1.全体のコード

2.コードの詳細( HTML )

グラフを表示する場所を定義します。

3.コードの詳細( JavaScript )

3−1.ツールチップの初期化

ツールチップの表示には、d3.tip を使用します。
d3.tip を使用するにあたりclassの定義など、初期設定を行います。

ポイントは、下記になります。

ここでは、表示するツールチップの内容を設定します。
htmlで設定できるので、自由にスタイルを適用することができます。

3−2.ツールチップのイベントを設定

ツールチップを表示・非表示にするには、それぞれ関数を呼び出します。

show:ツールチップを表示
hide:ツールチップを非表示

Demoのコードでは、以下のように制御しています。
mouseover イベントで ツールチップを表示(show)
mouseout イベントでツールチップを非表示(hide)

また、tip は ツールチップを初期化する際に定義した、d3.tip() のオブジェクトが格納されている変数です。

4.まとめ

d3-tip を使用すると簡単にツールチップを表示することができます。
d3-tip の Git Hub と v5 で動作するソースコード(Demoで読み込んでいる、d3.tip.v4.js )が記載されているページは以下となります。

d3-tip の Git Hub
d3.js v5 で動作する d3-tip のソースコード