在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] + ")");
   }    
});