使用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缩放地图

回答

相关问题