D3.jsとHummer.jsを組み合わせてスマートフォン対応を行う

最終更新日

もともと、D3ではdragビヘイビア/zoomビヘイビアがスマートフォンの操作に対応していますし、touchstart、touchmove、touchendなどのDOMイベントを利用すればスマートフォンの操作に対応することはできるのですが、スワイプの判定などを独自に実装するのは結構面倒だったりします。
そこで、タッチ操作対応ライブラリとして有名なHummer.jsを利用してD3で作成したチャートをタッチ操作に対応させてみました。

サンプル

Force Layoutで生成したノードにスワイプイベントのリスナーを設定しています。ノードをタッチしたりスワイプするとアラートがでます。
hummer & d3

example

スマートフォンでアクセスし、「Open in a new window.」のリンクをクリックして試してみてください。
(Chromeの開発者ツールにあるエミュレータ機能を使えばPCでもスワイプイベントの動作確認が行えます)

ちょっとだけ解説

Hummer.jsのイベントリスナーを設置する関数を作成し、D3で生成した要素にイベントを束縛しています。

eachメソッドを利用してイベントを束縛します。