d3.event - d3イベントのイベントオブジェクト

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

d3.jsのd3.eventは、d3で実行されたイベントの、イベントオブジェクトです。通常のJavaScriptでは、function(e){ e.preventDefault() }というようにイベントオブジェクトにアクセスできますが、d3の場合はd3.eventでアクセスします。通常のイベントオブジェクトと同じように扱えます。

サンプルコード

<p>ターゲットの要素</p>

// p要素にクリックイベントを設定
d3.select( "p" ).on( "click", function() {

	// イベントオブジェクト
	//d3.event

	// 例えば、デフォルトの動作を止めるには
	d3.event.preventDefault() ;

} ) ;

デモ

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

RUN
HTML
CSS
JavaScript

<p><code>d3.event</code>(<code>[object MouseEvent]</code>)をテキストエリアの中に表示するよ！ここではオブジェクトが存在するかどうかっていうところだけ確認してね。</p> <p><textarea></textarea></p> <p><a id="target">実行</a></p>

textarea { font-size: 16px ; width: 100% ; min-height: 80px ; box-sizing: border-box ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; }

// クリックイベント d3.select( "#target" ).on( "click", function() { // d3.eventをテキストエリアに反映 d3.select( "textarea" ).property( "value", d3.event.toString() ) ; } ) ;