前回の記事でデータセットに応じてグラフに変化を付しました。
ボタンをクリックするとすぐに書き換わってしまいます。
そこで今回は、ボタンがクリックしたらアニメーションをしながら
棒グラフを変化するようにしてみます。D3.jsではattr()メソッドで
属性値を変更する前にtransition()メソッドを記述するだけです。
transition()メソッドは、以後のメソッドチェーンで指定された
属性値に時間をかけて変化させる処理を行います。
どのようにアニメーションをさせるかどうかは属性値に設定する値に
よります。D3.jsでのアニメーションは属性値の初期値と最終値のみを
設定すれば大丈夫です。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>D3.js グラフ更新時にアニメーションを付けてみる</title> <style> svg{ width:400px; height:300px; border:solid 1px green; } /* rect要素で設定するstyleプロパティ ここでのプロパティはSVG用の物です。 */ #sampleGraph rect{ stroke:#900000; stroke-width:2px; fill:#c0c0c0; } </style> <script src="../js/d3.js"></script> </head> <body> <h1>棒グラフ(一本)をD3.jsを使って表示します。</h1> <button style="display:block;margin-bottom:16px;" id="updataGraph">データ更新</button> <svg id="sampleGraph"></svg> <!-- グラフを表示する命令が 書かれたJSファイルを読み込む --> <script src="test.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
var dataSet = [250,100,50,20,300]; d3.select("#sampleGraph") //SVG要素を指定 .selectAll("rect") //SVGで四角形を示す要素を指定 .data(dataSet) //データを設定 .enter() //データ数に応じ、rect要素を生成 .append("rect") //SVG四角形を生成 .attr("x",0) //棒グラフの表示場所 X座標 .attr("y",function(d,i){ return i * 32; }) //棒グラフの表示場所 Y座標 .attr("width","0px") //棒グラフの横幅 .attr("height","24px") //棒グラフの高さ /* グラフ出現時にアニメーションをさせるために transition()をここで使用 */ .transition() /* 上記のtransition()のみでdelay()メソッドを使わないと、 全ての棒グラフが伸びてしまいます。 そこでグラフの出現順番に応じて、 アニメーションの開始時間を遅らせるようにします。 この遅らせる待ち時間を設定するのがdelay()メソッドです。 delay()メソッド 第１引数：パラメータのデータ 第２引数：出現の順番 */ .delay(function(d,i){ return i * 400; }) /* duration()メソッド アニメーション開始から終了までの時間を指定する グラフの１本の棒が２秒かけてアニメーションする */ .duration(2000) .attr("width",function(d,i){ return d + "px"; }); //棒グラフの横幅 //前回のコードに下記の処理を追加 //データ更新ボタンをクリックしたとき d3.select("#updataGraph") /* on()メソッド 第１引数：イベント名を文字列で指定 クリックの場合は"click" 第２引数：イベントが発生したときに 呼ばれる関数を指定する。 */ .on("click",function(){ for( var i = 0 ; i < dataSet.length; i ++){ dataSet[i] = Math.floor(Math.random() * 300 ); } /* 今回は、appendやenterメソッドは不要です。 データセットの総数が５個で、変更前と 変わらないからです。詳しくは別の記事で 説明します。 */ d3.select("#sampleGraph") .selectAll("rect") .data(dataSet) .transition() .attr("width",function(d,i){ return d + "px"; }) }); |