svg - d3.js での外部 SVG からのオブジェクトのズーム

Question

SVG オブジェクトのズームについて助けが必要です。私はいくつかの外部 SVG (Inksape で作成) を持っています。これは非常に大きく、D3.js を使用してその一部/オブジェクトにズームできるようにしたいと考えています。しかし、私はそれを作る方法を理解できません。すべての例はマップとキャンバスに関するものです。オブジェクト（BBox）と座標へのズームの両方で、それを作成する方法の提案。

これはいくつかのコードです。example.svg は 640x480 より大きいです。スペースバーを押すと、example.svg の別の部分を表示する変換 (翻訳/スケーリング) が必要です。

var width = 640,
height = 400,
focused = false;

var pano = d3.select("div#pano");

d3.xml("data/example.svg", "image/svg+xml", function(xml) {
  var importedNode = document.importNode(xml.documentElement, true);
  d3.select("#pano").node().appendChild(importedNode);

  frames = d3.select("g#main");

  var zoom = d3.behavior.zoom()
      .translate([0, 0])
      .scale(1)
      .on("zoom", zoomed);

   pano.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height)
      .on("keydown", function() {
        if (d3.event.keyCode == 32) {
          this.call(zoom);
        }
      })

   function zoomed() {
      frames.attr("transform", "translate(" + [0, -400] + ")");
   }    
});