BLOGワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。2014-11-04D3.jsによるデータドリブンなアニメーションJavaScript今回のエンジニアブログを担当する藤岡です。前回に引き続き、D3.jsを用いたデータの可視化を行っていきたいと思います。今回は、D3.jsの機能を用いて、棒グラフにデータドリブンなアニメーションをさせてみます。アニメーション機能が搭載されているグラフを見ると、楽しいですよね。グラフを用意ではまず、前回のようにサンプルデータセットを元にデータバインディングを行い、svg描画領域にグラフを作成します。今回は、前回使用したグラフを少し拡張したものを使用します。前回同様にサンプルデータセットをバインディングし、スケールによるマッピングを行い、数値を可視化しています。実行すると、棒線が表示されます。目盛りも無い状態なので、これではグラフであるとは言えません。目盛りを追加そもそもグラフとして成り立たせるためには目盛りが必須です。D3.jsでは、目盛りを設定する機能もバッチリ含まれています。D3.jsで目盛りを表示するには、domainとrangeの設定が大切になってきます。下記のソースコードを追加することで目盛りが追加されます。目盛りのスタイルを設定しています。目盛りを生成する際にもD3.jsのスケール機能を使用します。ドメインとレンジを設定し、目盛りの範囲を指定しています。d3.svg.axis()が目盛りを処理するメソッドです。上記のスケールを使用し、orient()によって目盛りの表示場所をbottomに指定しています。目盛りの設定が完了したので、後は表示してあげるだけです。目盛りを描画するにはsvg領域にg要素を追加します。g要素を使うことで、g要素に内包されている複数の要素を1グループとして扱うことが出来るようになります。transform属性で、translateによる並進を指定しています。今回は棒線の下に表示されるよう位置を調節しています。call()に設定した目盛りを渡してやることで、目盛りが描画されます。アニメーションしかし、このままでは味気が全く無く、データドリブンであるとは言えません。・ボタンがクリックされたらデータを更新する・データの更新時にアニメーションさせるこれら二つの機能を実装したいと思います。◆ボタンクリック時のデータ更新ボタンを追加するために、button要素を追加します。D3.jsではイベント処理を用意することが可能です。要素に対して、on()メソッドを使ってイベント処理を設定します。上記の処理は、update-btn要素がクリックされた時、ランダムに値を設定し直しています。再設定されたデータセットを各要素にバインディングしてやることで、データの更新を行っています。◆データ更新時にアニメーションさせるアニメーションの実装ですが、実は凄く簡単です。データを更新する前に、要素にtransition()メソッドを追加してあげるだけで実装することが出来ます。棒線のwidthを設定していた箇所を以下のように変更します。・transition()transition()メソッド以後に、メソッドチェーンで指定された属性値に時間をかけて変化させる処理を行います。属性値の初期値と最終値を設定してやるだけで、その間のアニメーションはD3.jsが勝手に補完してくれます。・delay()delay()メソッドは、アニメーションに待ち時間を持たせることが可能です。delayメソッドは関数をパラメータとして渡してやることで、データセットのデータと順番を取得してくれます。上記の例では、各データごと、アニメーション開始にディレイを与えています。・duration()duration()メソッドは、アニメーション開始から終了までの時間を指定することが出来ます。パラメータにはミリ秒単位で時間を指定します。こちらの動画をクリックすることで、データの更新とアニメーションが確認出来ると思います。sample_graph_animation最終的なコードはこちらになります。表示した段階で目盛り、棒線が欠けてしまっていたので、余白を設定し位置を微調整しています。いかがでしたでしょうか。アニメーション機能を実装することで、見ていて楽しい&見やすいグラフを作り上げることが可能だと感じました。12:41D3.jsによるデータドリブンなアニメーションTweet関連記事2015-07-13【Unity】Missingがあるアセットを検索する今回担当させていただく大橋です。こんにちは、山内です。今回のエンジニアブログを担当する藤岡です。お願い致し...2014-07-14「LiquidFun」を利用して船を海に浮かべてみるこんにちは。今回ブログを担当します長屋です。Redisをインストールこんにちは!サーバー担当の山内です。採用情報ワンダープラネットではモバイルゲーム開発者を募集しております。(S編)C/C++でネットワークプログラミングをやってみよう(2)スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。