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

縦棒グラフにアニメーションを付ける

グラフを効果的に見せるためにアニメーションを使います。縦棒グラフをアニメーションさせます。D3.jsでのアニメーションは下記のように行います。

1.attr(),style()メソッドでアニメーション開始時の数値を設定
2.transition()メソッドの後にattr(),style()メソッドでアニメーション終了時の値を設定

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

D3.jsでは下記のメソッドを使い、アニメーションに関する時間を設定します。

メソッド 詳細
duration(ミリ秒) アニメーション開始から終了までの時間
delay(ミリ秒) アニメーション開始までの待機時間

D3.jsではdelay()メソッドを使うことで効果的なアニメーションを表現できます。

コメント

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