D3.jsで時計(2)
前回D3.jsでつくった時計のようなものに、アニメーションを追加してみました。
D3.jsのdata()を使うことでデータ（ここでは日付や時間など）とSVGの要素を結合することができます。とても適当な説明ですが、自分の場合は３つの小円という解説をみてイメージをつかみました。
結合することで、データにない要素があれば要素を削除(remove)、データにしかなければ要素を追加(append)することができます。
要素を追加するときに.transition()（遷移、変化的な）.attr("width", 10)（横幅の値を定める）とすると、ブロックがにゅっと追加されるようになります。
複数のパラメータを同時に遷移することもできるので、要素を削除するときにx,y,widthを変更し、秒ならば分、分なら時間、時間なら日のブロックに吸い込まれるようなアニメーションをつくることができます。
ちなみに追加や削除する以外のときも、要素の移動や変形をすることはできます。
それとD3.jsはSVGだけでなくdivやspanなどの要素も扱うことができます。
データを可視化した〜などのサンプルもbl.ocks.org - mbostockあたりに沢山あるので見てみると楽しめるとおもいます。
