d3.touches - 複数のタッチ位置を取得する

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

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

サンプルコード

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

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

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

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

} ) ;

デモ

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

RUN
HTML
CSS
JavaScript

タッチした指を動かしてね。 <div id="container"></div> 1本目: [ ?, ? ] 2本目: [ ?, ? ] 3本目: [ ?, ? ] 4本目: [ ?, ? ] 5本目: [ ?, ? ]

#container { width: 90% ; 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" ) ; // 要素内におけるタッチ座標を取得 // ( この場合、[this]でも受け入れてくれます ) var multiCoordinates = d3.touches( element ) ; // 取得した分の座標を書き出す var xElements = document.getElementsByClassName( "x" ) ; var yElements = document.getElementsByClassName( "y" ) ; for( var i=0; 5>i; i++ ) { var coordinates = multiCoordinates[i] ; xElements[i].textContent = ( coordinates ) ? coordinates[0] : "?" ; yElements[i].textContent = ( coordinates ) ? coordinates[1] : "?" ; } } ) ;

構文

multiCoordinates = d3.touches( container )

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

戻り値
項目	説明
multiCoordinates	`coordinates`(第1要素にX座標、第2要素にY座標を含む配列)が、検知した指の数だけ含まれた配列が返る。

ノート

coordinatesの複数版: 戻り値は、d3.touch()で取得できる戻り値の複数版です。
d3イベント内で有効: d3.on()などで設定したイベント内(d3.eventが存在する状態)でないとエラーが起こります。element.onclickやaddEventListener()のイベント内では動作しません。TypeError: Cannot read property 'sourceEvent' of nullが発生します。
selectionで指定できない: d3.touches()の引数(対象となる要素)はd3.selectionオブジェクトではそのまま指定できません。指定したいなら、d3.touch( d3.select( "#id" ) )ではなく、d3.touches( d3.select( "#id" ).node() )というように、node()を使ってノードを指定します。また、d3.selectionの構造を理解しているならd3.touches( d3.select( "#id" )[0][0] )でも大丈夫なことが分かると思います。