スポンサーリンク
スポンサーリンク

グラフをアニメーションさせる

前回の記事でデータセットに応じてグラフに変化を付しました。
ボタンをクリックするとすぐに書き換わってしまいます。

そこで今回は、ボタンがクリックしたらアニメーションをしながら
棒グラフを変化するようにしてみます。D3.jsではattr()メソッドで
属性値を変更する前にtransition()メソッドを記述するだけです。

transition()メソッドは、以後のメソッドチェーンで指定された
属性値に時間をかけて変化させる処理を行います。
どのようにアニメーションをさせるかどうかは属性値に設定する値に
よります。D3.jsでのアニメーションは属性値の初期値と最終値のみを
設定すれば大丈夫です。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました