Javascript 复制d3、svg地图后如何更新投影

我有一张世界地图，它将被放置在popover/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);
}

var-width=280，height=width/2，scale=50；
var投影、路径、svg、g、国家、国家、内容；
投影=d3.geo.mercator（）
.translate（[（宽度/2），（高度/2）]）
.比例（宽度/2/数学PI）；
path=d3.geo.path（）.projection（projection）；
svg=d3。选择（#referenceMap”）。追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
g=svg.append（“g”）；
d3.json（“data/world-topo-min.json”，函数（error，world）{
countries=topojson.feature（world，world.objects.countries）.features；
国家=g.selectAll（“.country”）。数据（地形）；
country.enter（）插入（“路径”）
.attr（“类别”、“国家”）
.attr（“d”，路径）
.attr（“id”，函数（d，i）{返回d.id；}）
.attr（“title”，函数（d，i）{return d.properties.name；}）
.style（“fill”，函数（d，i）{返回d.properties.color；}）；
content=d3.选择（'#referenceMap'）.html（）；/--复制SVG
});
函数copyMap（元素、国家名称）{
var countryPath=countries.filter（函数（d）{
返回d.properties.name==countryName；
})[0];
var div=d3.select（element）.html（content）；//--“粘贴”SVG
g=d3。选择（元素）。选择（'g'）；
.attr（“fill”，“rgb（102，106，79）”；/--这也很好用
//问题区域：更新投影以平移和缩放给定国家/地区
var bounds=path.bounds（countryPath）；
var hscale=标度*宽度/（界限[1][0]-界限[0][0]）；
var vscale=标度*高度/（界限[1][1]-界限[0][1]）；
刻度=（hscale

进行投影后。比例（600）；我需要添加g.selectAll（“path”）.attr（“d”，path）；。不幸的是，这只会让我的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.

//新投影
投影=d3.geo.mercator（）.center（d3.geo.centroid（countryPath））
.比例（比例）。平移（偏移）；
路径=路径.投影（投影）；
g、 选择全部（“路径”）.attr（“d”，路径）；//你想做什么？我是说你只是想把地图居中吗？或者你真的想通过选择使用完整的其他投影吗？@kwoxer我想通过选择使用完整的其他投影。但是，即使我能够使原稿居中，它也可以使用：projection.scale（600）、center（10,50）；但是如果我用一个函数来运行这个函数，它什么也不做。你能展示一些正在运行的东西吗？这将有助于我理解这个问题。谢谢。@kwoxer谢谢你的帮助和关注。我在把它输入plunker的时候就知道了。做
projection.scale（600）后
，我需要添加
g.selectAll（“path”）.attr（“d”，path）。不幸的是，这只会让我的popover加载速度太长。我将结束这个问题。回到绘图板。好的，因为你不能真正显示问题。我想给你看我的一个项目。也许它使用了一些对你有帮助的东西。它相当大，我不切换投影，但我做很多缩放。希望能有所帮助。：）