javascript - 使用 D3 和 Datamap 进行地图缩放

Question

我需要你的帮助。我正在使用数据地图，我想在一个国家/地区实现缩放。我可以找到大量示例如何实现这一点，但不同的是，我希望能够使用外部按钮来实现这一点。

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

工作代码在这里