d3.jsで画像のドラック＆ドロップ、回転、拡大、縮小やってみた

d3.jsで画像のアニメーションをやっていきます。
ソースコードはGistにアップしているのですぐ使えるかと思います。
http://bl.ocks.org/ganezasan/914eb5df8b98315897c2

##d3とは？

Data Driven Documentの頭文字をとってd3です。データに基づいてドキュメントを操作するための JavaScript ライブラリです。
Mike Bostockさんが作ってくれています。こちらが本家です。

####http://d3js.org/

データ可視化のためのJavaScriptのライブラリの１つと覚えて貰えればと思います。

ただし、他のグラフ描画のためのライブラリとは違いがあります。
d3.jsには最初から用意されているグラフのテンプレートがありません。グラフを１から作ることができます。通常だと用意されているテンプレートがあり、テンプレート通りにしかグラフは描画できません。例えば、散布図とか棒グラフとかですね。

じゃあ、どうやってグラフ作るんだよと言われると思われるかもしれないですが、大丈夫です。
「example page」サンプル集があります。

コードも公開されているため、大体のグラフを描画する際には、
凝ったことをしなければ十分これだけでもわかるかと思います。

使い方ですが、
htmlの中に以下のコードを入れれば使用できます。

<script src="http://d3js.org/d3.v3.min.js"></script>

d3の考え方として基本的な流れが、
ドキュメント（HTML）を選択してデータ・操作・属性を紐付ける流れになります。
具体的なコードだと、こんな感じです。

d3.select("タグのid").data(["ほげ"]).style("color", "white");

##作ったもの

今回は画像のドラッグ&ドロップ、ボタンを押したら画像の追加や回転、拡大、縮小できるものを作ってみました。

##ドラッグ&ドロップ

//ドラッグ時のイベントをセット
//thisがイベントを検知したDOM要素になります
//dに入ってくるのはdgroupでセットしたdataになります
//translateでDOM要素のx、yの位置を動かしています
//「r」は角度で、「scale」が大きさになります　※ここは回転、拡大、縮小に使います
drag = d3.behavior.drag()
 .on("drag", function(d,i) {
  d.x += d3.event.dx;
  d.y += d3.event.dy;
  d3.select(this).attr("transform", function(d,i){
    return "translate(" + [ d.x,d.y ] + "),
    rotate("+d.r+",160, 160),
    scale("+d.scale+","+d.scale+")";
  });
});

//どこの要素をドラッグ可能にするか、データを紐付け
dgrop = d3.select(id).append("g")
  .data([ {"x":20, "y":20, "r":1 , "scale":1} ])
  .attr("x",0)
  .attr("y",0)
  .attr("transform","translate(0,0)")
  .append("image")
  .attr("x",0)
  .attr("y",0)
  .attr("width",300)
  .attr("height",300)
  .attr("xlink:href","octocat.png")
  .call(drag);

##回転

//回転
//DOM要素に紐付いているdataの「r」に30度を引いて左回転するようにしています。
$("#wheel").bind("click",function(){
  dgrop.attr("transform", function(d,i){
      d.r=d.r-30;
      return "translate(" + [ d.x,d.y ] + "),rotate("+d.r+" ,160, 160),scale("+d.scale+","+d.scale+")";
  }); 
});

##拡大

//拡大
//DOM要素に紐付いているdataのスケールに1.2を乗算して大きくしています。
$("#big").bind("click",function(d){
  dgrop.attr("transform", function(d,i){
    d.scale=d.scale*1.2;
    return "translate(" + [ d.x,d.y ] + "),rotate("+d.r+" 160 160),scale("+d.scale+","+d.scale+")";
  });
});

##縮小

//縮小
//DOM要素に紐付いているdataのスケールに0.8を乗算して小さくしています。
$("#small").bind("click",function(d){
  dgrop.attr("transform", function(d,i){
    d.scale=d.scale*0.8;
    return "translate(" + [ d.x,d.y ] + "),rotate("+d.r+" 160 160),scale("+d.scale+","+d.scale+")";
  });
});  

##まとめ
d3.jsでは細かくアニメーションを設定できます。
速度や表示の仕方なども今度やってみたいと思います。
こちらに詳しく書いてます。
https://github.com/mbostock/d3/wiki/Transitions

いつも参考にしているサイトです。お世話になっております。

http://bl.ocks.org/mbostock
http://jsdo.it/_shimizu
http://dotinstall.com/lessons/basic_d3js