D3.js 棒グラフ(bar chart)でのtooltipの追加方法

2018-02-24

棒グラフにtooltipを付ける方法を紹介します。D3 v4/v5にはtooltip用の関数が用意されていないのですが、CSSを使って簡単に実装できます。

サンプルデモ – バーをタップ、もしくはカーソルを合わせてください

サンプルプログラム

解説

基本的な棒グラフの作り方はこちらを参照ください。

1. CSS設定

tooltipとホバー時のバーのスタイルを設定します。visibility: hidden;としておくことで、最初はtooltipを隠しておきます。

2. tooltip用div要素追加

tooltip用にdiv要素を追加します。

3. マウス&タッチイベント設定

on()で”mouseover”、”mousemove”、”mouseout”イベントを設定します。タッチイベントにも対応しており、バーをタッチすると”mouseover”、”mousemove”に設定した関数が呼び出されます。”mousemove”ではD3でマウス位置を取得するd3.event.pageX、d3.event.pageYを使ってtooltipの位置を変更しています。 “mouseout”時に”visibility”: “hidden”としてtooltipを隠します。タッチ操作の場合tooltipが表示されたままになります。

まとめ

基本的なCSS操作なので、他のグラフにも応用がききます。