jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

transitionを利用したsvgオブジェクトの位置の変化

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ボタンを押してみてください