LoginSignup
54

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-09-04

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

d3とは?

kobito.1409798437.408858.png

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

http://d3js.org/

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

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

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

kobito.1409798315.536843.png

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

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

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

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

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

作ったもの

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

kobito.1409801815.347187.png

ドラッグ&ドロップ

//ドラッグ時のイベントをセット
//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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
54