使用 D3 和 Datamaps 进行地图缩放

Question

我需要你的帮助。我正在使用 datamaps，我想对一个国家实施缩放。我可以找到大量如何实现此目的的示例，但不同之处在于，我希望能够使用外部按钮来执行此操作。

假设在我的 <div id="worldmap"></div> 渲染地图的地方之外，我有一个按钮：<button data-location="AUS">。我如何使用这些值进行缩放？我知道数据图使用这些短名称（AUS = 澳大利亚）来标记名称。如果可以的话，我还可以提供 long lat 坐标。

有人可以帮我解决这个问题吗？我是 D3 和数据映射的新手。

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", "");
}

工作代码here

使用 D3 和 Datamaps 进行地图缩放

Map zooming with D3 and Datamaps

javascript

d3.js

datamaps