d3.js에서 이미지의 드래그 앤 드롭, 회전, 확대, 축소 해 보았습니다.

d3.js에서 이미지의 애니메이션을 진행합니다.
소스 코드는 Gist에 올라 있기 때문에 바로 사용할 수 있을까 생각합니다.
htp // bl. 오크스. rg/가네자씨/914에 b5df8b98315897c2

d3이란?

Data Driven Document의 이니셜을 취하여 d3입니다. 데이터를 기반으로 문서를 조작하기 위한 JavaScript 라이브러리입니다.
Mike Bostock 씨가 만들고 있습니다. 여기가 본가입니다.

htp // d3js. rg/

데이터 시각화를 위한 JavaScript의 라이브러리의 하나라고 기억해 받을 수 있으면(자) 생각합니다.

그러나 다른 그래프 그리기를 위한 라이브러리와는 차이가 있습니다.
d3.js에는 처음부터 제공된 그래프 템플릿이 없습니다. 그래프를 1에서 만들 수 있습니다. 보통이라고 준비되어 있는 템플릿이 있어, 템플릿대로 밖에 그래프는 그릴 수 있습니다. 예를 들어, 산포도라든지 막대 그래프라든지군요.

그럼, 어떻게 그래프 만드는 거라고 한다고 생각될지도 모릅니다만, 괜찮습니다.
"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에서는 미세하게 애니메이션을 설정할 수 있습니다.
속도나 표시 방법 등도 이번 해보고 싶습니다.
여기에 자세히 쓰고 있습니다.
htps : // 기주 b. 코 m / m 보s와 ck / d3 / 우키 / T 란시 치온 s

항상 참고로하고있는 사이트입니다. 신세를지고 있습니다.

htp // bl. 오크스. rg/m보s와 ck
htp : // js. t/_시미즈
h tp : // Dochin s tar. 이 m / ぇそん s / 바시 c_d3js