2016/01/03

[JavaScript][d3.js]zooming panningジェスチャーに対応

d3.jsでzooming panningジェスチャーに対応する方法があるみたいなので調査しました。

Zoom Behaviorに書かれており、

<div style="width:200px;height:200px;overflow: hidden;background: gray;">
  <img src="./img.png" class="_img">
</div>
<script>
var zoom = d3.behavior.zoom();
d3.select('._img').call(zoom);
</script>
で設定自体は完了するのですが、
<div style="width:200px;height:200px;overflow: hidden;background: gray;">
  <img src="./img.png" class="_img">
</div>
<script>
var zoom = d3.behavior.zoom();
zoom.on('zoom',function(){
});
d3.select('._img').call(zoom);
</script>
とすることでジェスチャー時のコールバックを受け取ることができる。

0 コメント:

コメントを投稿