【D3.js】Shape Tweening 練習中

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

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

Bubbly Gunma

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

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

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

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

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