使用D3和Datamaps进行地图缩放

Question

我需要你的帮助。我正在使用 datamaps，我想在一个国家上实现缩放。我可以找到很多例子来实现这个功能，但是不同之处在于，我希望能够通过一个外部按钮来完成这个操作。

比方说，在我的渲染地图的 <div id="worldmap"></div> 外面，我有一个按钮：<button data-location="AUS">。 如何使用这些值进行缩放？我知道 datamaps 使用这些缩写名称（AUS = 澳大利亚）来表示名称。如果这是实现缩放的方法，我也可以提供经纬度坐标。

谁能帮帮我解决这个问题？我对 D3 和 datamaps 还比较新手。

- Facyo Kouch

Answer 1

一种方法是使用 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", "");
}

这里有一个可运行的代码，链接在此

- Cyril Cherian

---

非常感谢！我正在寻找一种更具有动态性的解决方案，但这已经足够让我走上正确的轨道了。谢谢！ - Facyo Kouch