如何更新投影后複製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地圖

回答

相關問題