【D3.js】Shape Tweening 練習中

最終更新日

D3.jsを使ったPathのアニメーションについて勉強中です。
path要素のアニメーションはcircle要素やrect要素を使ったアニメーションより、いろいろと手間がかかるのですが、その中でも地理情報を元に作成したPathを動かすのは結構難儀だったりします。

でも、これができるといろいろと表現の幅が広がるので、知恵熱だしながら下記サンプルを元に習作をつくってみました。

Shape Tweening

Bubbly Gunma

上記サンプルを元に群馬県をバブルっぽくしてみました。

Bubbly Gunma

example

ほとんど上記サンプルのままですが、簡単に説明すると、各市ポリゴンの中心座標を取得し三角関数を使って円の座標データを別に作成しています。円の描き方に関しては下記記事がとても参考になります。

openFrameworks – いろいろな方法で円を描く、インタラクションを付加する

線グラフを群馬県にする

「何を言っているのかわからねーと思うが、 俺も何をやりたかったのかわからなかった」

線グラフを群馬県にする

example

カスタムinterpolateを作成してPathデータを補間しています。
線グラフ→水平線→水平線(座標点補間)→群馬県という感じで変化させていて、間の2つが無いとあまり綺麗なアニメーションになりません。
どうやって綺麗な遷移を作るかがPath要素をトランジションさせたいときの難しいところですね。

失敗作

ちなみに遷移のさせかたに失敗すると、下記のようなとんでもない動作になったりします。

The 失敗作