如何在复制d3，svg地图后更新投影

Question

我有一个世界地图，它将被放置在popovers/modals中（遵循本教程）当使用时，它需要放大到给定的国家。我制作了一个参考地图，隐藏了它，复制了它的内容，创建了一个新的（本地化的）地图。问题是：我无法更新新地图上的投影比例。它在原始地图上工作，遵循这个答案中的说明。

我是第一次来这里寻求帮助的。非常感谢。我确信这不是最佳实践，但重新绘制一个新svg的加载时间是一个性能问题。

var width = 280, height = width/2, scale = 50;
var projection, path, svg, g, countries, country, content;
projection = d3.geo.mercator()
  .translate([(width/2), (height/2)])
  .scale( width / 2 / Math.PI);
path = d3.geo.path().projection(projection);
svg = d3.select("#referenceMap").append("svg")
  .attr("width", width)
  .attr("height", height);
g = svg.append("g");
d3.json("data/world-topo-min.json", function(error, world) {
  countries = topojson.feature(world, world.objects.countries).features;
  country = g.selectAll(".country").data(topo);
  country.enter().insert("path")
    .attr("class", "country")
    .attr("d", path)
    .attr("id", function(d,i) { return d.id; })
    .attr("title", function(d,i) { return d.properties.name; })
    .style("fill", function(d, i) { return d.properties.color; });
  content = d3.select('#referenceMap').html(); // -- copy the SVG
});
function copyMap(element, countryName) {
  var countryPath = countries.filter(function(d) {
    return d.properties.name == countryName;
  })[0];
  var div = d3.select(element).html(content); // -- 'paste' the SVG
  g = d3.select(element).select('g');
    .attr("fill", 'rgb(102, 106, 79)'); // -- this works fine as well
  // Issue Area: Update the projection to pan and zoom on the given country 
  var bounds  = path.bounds(countryPath);
  var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
  var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
  scale   = (hscale < vscale) ? hscale : vscale;
  var offset  = [width - (bounds[0][0] + bounds[1][0])/2,
                    height - (bounds[0][1] + bounds[1][1])/2];
  // new projection
  projection = d3.geo.mercator().center(d3.geo.centroid(countryPath))
    .scale(scale).translate(offset);
  path = path.projection(projection);
}

Answer 1

完成投影后。比例尺（600）；我需要添加g.selectAll（"路径"）.attr（"d"，路径）；。不幸的是，这只是让加载速度对我的popover来说太长了。

// new projection
projection = d3.geo.mercator().center(d3.geo.centroid(countryPath))
.scale(scale).translate(offset);
path = path.projection(projection);
g.selectAll("path").attr("d", path); // <-- Added this line to fix the issue.