selection.interrupt - アニメーションをキャンセルする

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

d3.jsのselection.transition()は、実行中のアニメーション効果をキャンセルして停止させるメソッドです。

サンプルコード

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

// p要素を選択する
var selection = d3.select( "p" ) ;

// ゆっくりと背景を赤にする
selection.transition().style( "background", "red" ) ;

// アニメーション効果を途中でキャンセルする
selection.interrupt() ;

デモ

RUN
HTML
CSS
JavaScript

<p>アニメーション効果をキャンセルしてみよう！</p> <p id="target">ターゲット要素</p> <ul> <li><a id="method1">実行</a></li> <li><a id="method2">停止</a></li> <li><a id="method3">リセット</a></li> </ul>

#target { height: 100px ; border: 1px solid #000 ; text-align: center ; line-height: 100px ; background: #fff ; } ul { margin: 24px 0 0 ; padding: 0 ; list-style-type: none ; } ul li { margin: 4px 0 0 ; padding: 0 ; } textarea { font-size: 16px ; width: 100% ; min-height: 60px ; 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 ; }

// クリックイベント1 document.getElementById( "method1" ).onclick = function() { // p要素を選択する d3.select( "#target" ) // transitionを加える .transition() // アニメーションを5秒間に設定 .duration( 5000 ) // 例えば、背景を赤にする .style( "background", "red" ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // アニメーションを停止する d3.select( "#target" ).interrupt() ; } // クリックイベント3 document.getElementById( "method3" ).onclick = function() { // リセット d3.select( "#target" ).interrupt().style( "background", "white" ) ; }

構文

selection = selection.interrupt( [name] )

引数
項目	説明
name	省略可。別々の名前のtransitionを同時に実行している場合、キャンセルするtransitionの名前を引数で指定できる。指定しなかった場合は、空の名前のtransitionが対象となる。

戻り値
項目	説明
selection	transitionをキャンセルした後のd3.selectionオブジェクトが戻り値となる。

ノート

対象を指定する: 引数に名前を与えることで、キャンセルしたいtransitionを指定することができる。