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

我有一个世界地图，将被放置到弹出/模式（following this tutorial）当使用它，它需要放大到一个给定的国家。我做了一个参考地图，隐藏了它，复制了它的内容，创建了一个新的（本地化的）地图。问题：我无法更新新地图上的projection.scale。它在原始地图上工作，遵循this answer的说明。如何更新投影后复制d3，svg地图

我第一次来这里寻求帮助。非常感谢。我相信这不是最佳实践，但重新绘制新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); 
}

来源

2015-11-06 Joshua Benson

你想做什么？我的意思是你只想把你的地图居中？或者你是否真的想通过选择使用完整的其他投影？ – kwoxer

@kwoxer我想通过选择完整的其他投影。但即使我能够将原件放在中心位置，它也可以使用：projection.scale（600）.center（10,50）;但如果我使用一个函数来运行那个函数，它什么都不做。 –

你可以展示一些正在运行的东西吗？这会帮助我理解这个问题。谢谢。 – kwoxer

做了projection.scale（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.

来源

2015-11-09 16:46:56

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

回答

相关问题