タグ

ブックマーク / hasami-yoshibo.hatenablog.com (1)

  • d3.jsを用いた連続アニメーション - プログラミング兼読書日記

    d3ではtransitionを用いて簡単にアニメーションを実現できます。しかし、d3を用いてデータに基づく連続したアニメーションを実装することは面倒です。ここでは、連続アニメーションを若干汚い方法で実装します。 アニメーションするオブジェクトが一つの場合: 各時間に対応するオブジェクトの属性を持った配列を作成する。 オブジェクトを次の属性に変化させる再帰的な関数animateを作成する。 2.に関しては、d3のeachを用いて、animateの中でアニメーション完了後に呼ばれる関数をセットする。セットした関数の中でanimateを呼び出し、再帰的にアニメーションを実現させる。 以下にアニメーションのサンプルとソースを記載しておきます。 start ソース: <div id="sample"><button id="startbutton">start</button> <div> <scr

    d3.jsを用いた連続アニメーション - プログラミング兼読書日記
  • 1