d3.mouse - マウス位置を取得する

投稿日:2016/03/03 / 更新日:2016/03/03

d3.jsのd3.mouse()は、マウスの位置を取得するAPIです。

サンプルコード

<div id="container"></div>

// d3イベント内でないと機能しない
d3.select( "#container" ).on( "click", function() {

	// 対象となる要素を取得
	var element = document.getElementById( "container" ) ;

	// 要素内におけるマウス座標を取得
	// ( この場合、[this]でも受け入れてくれます )
	var coordinates = d3.mouse( element ) ;

} ) ;

デモ

サンプルコードのデモを確認して下さい。編集してどのように動作するのか確認してみましょう。

RUN
HTML
CSS
JavaScript

<p>マウスを要素内で動かしてみてね。</p> <div id="container"></div> <p>X座標:<mark id="x">?</mark> / Y座標:<mark id="y">?</mark></p>

#container { width: 150px ; height: 150px ; margin: 20px auto ; background: #D36015 ; } p { text-align: center ; }

// [#container]の[mousemove]イベント d3.select( "#container" ).on( "mousemove", function() { // 対象となる要素を取得 var element = document.getElementById( "container" ) ; // 要素内におけるマウス座標を取得 var coordinates = d3.mouse( element ) ; // [#x]、[#y]に座標を書き出す document.getElementById( "x" ).textContent = coordinates[0] ; document.getElementById( "y" ).textContent = coordinates[1] ; } ) ;

構文

coordinates = d3.mouse( container )

引数
項目	説明
container	マウス位置を取得する対象となる要素(ノード)を指定する。イベントの要素なら`this`でも可。この要素の左上を起点(`0, 0`)として、座標が検出される。

戻り値
項目	説明
coordinates	第1要素にX座標、第2要素にY座標を含む配列(`[ x, y ]`)が返る。

ノート

d3.mouse()で押さえておきたいポイントをまとめています。

d3イベント内で有効: ハマりました。例えば、d3.on()などで設定したイベント内(d3.eventが存在する状態)でないとエラーが起こります。element.onclickやaddEventListener()のイベント内では動作しません。TypeError: Cannot read property 'sourceEvent' of nullが発生します。
selectionで指定できない: d3.mouse()の引数はd3.selectionオブジェクトでは指定できません。指定したいなら、d3.mouse( d3.select( "#id" ) )ではなく、d3.mouse( d3.select( "#id" ).node() )というように、node()を使ってノードを指定します。また、d3.selectionの構造を理解しているならd3.mouse( d3.select( "#id" )[0][0] )でも大丈夫なことが分かると思います。
タッチデバイスも対応: タッチデバイスでもclickイベントなどなら、クリック位置として取得できる。