使用D3和Datamaps縮放地圖

我需要您的幫助。我使用的是datamaps，我想在一個國家實施縮放。我可以找到大量的例子，我可以做到這一點，但不同的是，我希望能夠用外部按鈕來做到這一點。使用D3和Datamaps縮放地圖

比方說，我的<div id="worldmap"></div>以外的地圖正在呈現我有一個按鈕：<button data-location="AUS">。我怎樣才能使用這些值進行縮放？我知道數據地圖使用這些簡稱（澳大利亞=澳大利亞）來表示名稱。如果要這樣做，我還可以提供long lat座標。

有人可以幫我解決這個問題嗎？我相當新的D3和數據地圖。

來源

2017-09-12 Facyo Kouch

一種方法可能是您使用translate scale來翻譯和縮放到您選擇的區域，如下所示。

function gotoAustralia(){ 
    map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", "scale(1.5)translate(-400,-100)"); 
} 
function gotoSouthAmerica(){ 
    map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", "scale(1.5)translate(-50,-300)"); 
} 
function reset(){ 
    map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", ""); 
}

工作代碼here

來源

2017-09-12 06:52:20 Cyril

非常感謝您！我正在尋找更加動態的解決方案，但這足以讓我走上正軌。謝謝！ –

使用D3和Datamaps縮放地圖

回答

相關問題