d3.touch - タッチ位置を取得する

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

d3.jsのd3.touch()は、タッチの位置を取得するAPIです。

サンプルコード

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

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

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

	// 検知の対象となる指のIDを指定する (ここでは1本目の指)
	touchId = d3.event.changedTouches[0].identifier ;

	// 要素内におけるタッチ座標を取得
	// ( この場合、[this]でも受け入れてくれます )
	var coordinates = d3.touch( element, touchId ) ;

} ) ;

デモ

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

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 ; }

// d3イベント内でないと機能しない d3.select( "#container" ).on( "touchmove", function() { // 画面が動いてしまわないように d3.event.preventDefault() ; // 対象となる要素を取得 var element = document.getElementById( "container" ) ; // 検知の対象となる指のIDを指定する (ここでは1本目の指) var touchId = d3.event.changedTouches[0].identifier ; // 要素内におけるタッチ座標を取得 // ( この場合、[this]でも受け入れてくれます ) var coordinates = d3.touch( element, touchId ) ; // [#x]、[#y]に座標を書き出す document.getElementById( "x" ).textContent = coordinates[0] ; document.getElementById( "y" ).textContent = coordinates[1] ; } ) ;

構文

coordinates = d3.touch( container [, touches], identifier )

引数
項目	説明
container	タッチ位置を取得する対象となる要素(ノード)を指定する。イベントの要素なら`this`でも可。この要素の左上を起点(`0, 0`)として、座標が検出される。
touches	省略可。タッチリストの種類を指定する。省略した場合、`changedTouches`となる。あえて指定した方が良いケースは、執筆時点では想定できなかったので深く触れません。
identifier	第3引数(第2引数を省略した場合は第2引数)に、検知の対象となるタッチ(指)のIDを指定します。タッチリストのオブジェクトの、`identifier`プロパティで参照できるので、それをそのまま指定します。この例では、2本目のタッチ(指)のIDを指定したので、1本指では反応しません。2本同時にタッチしてみて下さい。

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

ノート

identifierの指定: ハマりました。タッチ(指)の種類を識別するための、identifierプロパティを指定しないと動作しません。私はドキュメントを読まず、第1引数の指定だけで大丈夫だと思って何度か試しましたがいつまでもできませんでした…。
d3イベント内で有効: ハマりました。例えば、d3.on()などで設定したイベント内(d3.eventが存在する状態)でないとエラーが起こります。element.onclickやaddEventListener()のイベント内では動作しません。TypeError: Cannot read property 'sourceEvent' of nullが発生します。
selectionで指定できない: d3.touch()の第1引数(対象となる要素)はd3.selectionオブジェクトではそのまま指定できません。指定したいなら、d3.touch( d3.select( "#id" ) )ではなく、d3.touch( d3.select( "#id" ).node() )というように、node()を使ってノードを指定します。また、d3.selectionの構造を理解しているならd3.touch( d3.select( "#id" )[0][0] )でも大丈夫なことが分かると思います。