Question

我需要你的帮助。我正在使用datamaps，我希望在一个国家/地区实施缩放。我可以找到大量的例子来说明如何实现这一点，但不同的是，我希望能够通过外部按钮来实现这一目标。

让我们在我正在渲染地图的<div id="worldmap"></div>之外说我有一个按钮：<button data-location="AUS">。我如何使用这些值进行缩放？我知道数据图使用这些短名称（AUS = australia）来表示名称。如果是这样的话，我也可以提供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进行地图缩放

1 个答案: