selection.transition - アニメーション効果を与える

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

d3.jsのselection.transition()は、d3.selectionオブジェクトに含まれる要素に対して、ゆっくりと時間をかける変化(アニメーション効果)を与えるためのメソッドです。

サンプルコード

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

// p要素を選択する
d3.select( "p" )

// transitionを加える
.transition()

// 例えば、背景を赤にする
.style( "background", "red" ) ;

// 引数に指定する名前を分けることで、複数の[transition]を同時に適用できる
d3.select( "p" ).transition( "typeA" ).style( "width", "100px" ) ;
d3.select( "p" ).transition( "typeB" ).style( "height", "100px" ) ;

デモ

RUN
HTML
CSS
JavaScript

<p>アニメーション効果をかけてみよう！</p> <p id="target">ターゲット要素</p> <ul> <li><a id="method1">実行</a></li> <li><a id="method2">リセット</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() // 例えば、背景を赤にする .style( "background", "red" ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // p要素を選択する d3.select( "#target" ) // 背景を白に戻す .style( "background", "white" ) ; }

構文

selection = selection.transition( [name] )

引数
項目	説明
name	省略可。1つの要素に設定されるtransitionは排他的です。新しいtransitionが適用される際、実行中のtransitionが存在すると、それがキャンセルされてしまいます。引数で任意の名前を付けて分けることで、複数のtransitionを同時に実行させることができます。名前を設定しない場合と、名前を設定して分けた場合の違いを確認してみて下さいね。省略すると、デフォルトで空の名前が自動的に付けられ、空の名前同士で衝突してしまうわけです。

戻り値
項目	説明
selection	transitionを指定した状態のd3.selectionオブジェクトが戻り値となる。

ノート

排他的: 1つの要素に、同じ名前のtransitionは1つしか存在できず、新しいtransitionは実行中の古いtransitionを止めてしまう。複数のtransitionを適用するには、引数で別々の名前を指定すること。