[JavaScript][d3.js]zooming panningジェスチャーでオブジェクトの拡大・縮小 その3

前回、translateとscaleを組み合わせてオブジェクトを拡大、縮小する処理を書きましたが、実際に試したところ、かくついてしまい、なんともギクシャクした動きになってしまいました。

そこで、どうやったら滑らかになるのかなーっと思って調査したところ、下のようにしたらよくなりました。

<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(){
 
  var t = "translate(" + d3.event.translate[0] + 'px,' + d3.event.translate[1] +"px) " + "scale(" + d3.event.scale + ',' + d3.event.scale + ")";
  d3.select('._img')
        .style("transform-origin", "0 0")
        .style("-moz-transform-origin", "0 0")
        .style("-webkit-transform-origin", "0 0")
        .style("-o-transform-origin", "0 0")
        .style("-ms-transform-origin", "0 0")
        .style("transform", t)
        .style("-moz-transform", t)
        .style("-webkit-transform", t)
        .style("-o-transform", t)
        .style("-ms-transform", t);
});
var d3Body = d3.select('body');
var svg = d3Body.call(zoom);
</script>

imgタグにイベントをbindするのではなく、bodyタグにbindすることによってパフォーマンスがよくなりましたー。