如何将Zoom +拖动行为添加到加载到D3.js中的外部SVG？

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

d3.xml("external.svg").then(function(externalSVG) {
  svg.node().appendChild(externalSVG.documentElement);
});

var zoom = d3.zoom()
  .scaleExtent([1, 10])
  .on("zoom", zoomed);

var drag = d3.drag()
  .on("start", dragstarted)
  .on("drag", dragged)
  .on("end", dragended);

svg.call(zoom);
svg.call(drag);

function zoomed() {
  svg.attr("transform", d3.event.transform);
}

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

function dragended(d) {
  d3.select(this).classed("active", false);
}

<circle class="zoomable draggable" cx="50" cy="50" r="20" fill="red"></circle>

svg.selectAll(".zoomable")
  .call(zoom);

svg.selectAll(".draggable")
  .call(drag);