D3.jsの最大の特徴の一つがtransitionを利用したアニメーションです。今回は、これを利用してsvgオブジェクトが画面内を移動する方法を紹介します。
transitionとは
transitionはhtmlにおいてDOM要素に時間的な変化を加えるための機能です。新たな要素を加えたり、画面上の要素を削除したり、要素のプロパティに変化を加えたりすることができます。
body内にSVGを加えて、大きさや色を設定します。D3.jsでは"."で、操作をつないでいくチェインメソッドが特徴的です。
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"> var svg = d3.select("body").select("div") .append("svg") .attr("width",600) .attr("height",450) .style("background-color", "black"); </script>
上記で設定したSVG上に円を一つ加えます。これもチェインメソッドを利用すれば簡単です。
svg .append("circle") .attr("r",30) .attr("cx",100) .attr("cy",100) .style("fill","blue");
transitionの時間的なプロパティの指定
transitionは、実行を開始するタイミングをdelayで指定し、実行に要する時間間隔をdurationで指定します。
変更するプロパティをtransitionの後にチェインメソッドで設定します。この例では、delayは0、durationは2000msです。2秒かけて、円の中心座標が(100,100)から(300,300)へ移動します。
svg .select("circle") .transition() .delay(0) .duration(2000) .attr("cx", 300) .attr("cy", 300);
ここまでをまとめると以下のようになります。
startボタンを押してみてください