D3.js v4ではd3.zoomオブジェクトを使用することで、簡単にパン/ズームを実装することができます。 var w = 900; var h = 500; var data = d3.range(0, 100).map(function(d){ return {"x": ~~(Math.random() * w ), "y": ~~(Math.random() * h), "r": ~~(Math.random() * 90) + 10 }; }); var svg = d3.select("svg") .attr("width", w) .attr("height", h) //ズーム対象とするレイヤーを生成 var zoomLayer = svg.append("g") //カラージェネレーター var color = d3.scaleOrdinal(d3.schemeCateg
![【D3.js】d3.zoomオブジェクトを使って Pan/Zoon を実装する。](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b332bea8a32d8442ae863956ac848d16802a9f0/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2013%2F02%2Fvboxzoom1.jpg)