使用 d3.js 缩放和平移以太平洋为中心的墨卡托地图答案

【问题标题】：Zooming and Panning a Mercator Map centered on the Pacific using d3.js使用 d3.js 缩放和平移以太平洋为中心的墨卡托地图
【发布时间】：2013-02-01 06:36:23
【问题描述】：

抱歉，如果这是我对显而易见的事情视而不见的简单案例，但我正在尝试整理一个页面，该页面显示以太平洋为中心的墨卡托投影中的世界地图（数据来自 TopoJSON 文件）。 IE。左边是欧洲，右边是美国，中间是澳大利亚。有点像这样……

从这一点开始，我希望能够根据自己的心愿缩放和平移地图，但是当我向东或向西平移时，我希望地图“四处”滚动而不是来到世界尽头（我希望这是有道理的）。

我目前正在处理的代码在这里（或以下 Gist (https://gist.github.com/d3noob/4966228) 或块 (http://bl.ocks.org/d3noob/4966228)）；

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {font-size:11px;}
path {
  stroke: black;
  stroke-width: 0.25px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
    velocity = .005,  
    then = Date.now() 
    height = 475;

var projection = d3.geo.mercator()
    .center([0, 0 ])
    .scale(1000);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");


d3.json("world-110m.json", function(error, topology) {
  g.selectAll("path")
    .data(topojson.object(topology, topology.objects.countries).geometries)
  .enter()
    .append("path")
    .attr("d", path)
    .style("fill","black")
    
  d3.timer(function() {  
    var angle = velocity * (Date.now() - then);  
    projection.rotate([angle,0,0]);  
    svg.selectAll("path")  
      .attr("d", path.projection(projection));  
  }); 
  
  var zoom = d3.behavior.zoom()
  .on("zoom",function() {
    g.attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")")
  });
    
  svg.call(zoom)

});
</script>
</body>
</html>

代码是示例的混合体，因此我可以看到一个可以自动从西向东旋转的地图，我可以使用鼠标进行平移和缩放，但是在平移和缩放时，据我所知，我我影响的是内部的“g”元素，而不是“svg”元素中的地图。

有很多很好的例子可以平移和缩放以子午线为中心的地图。但是我发现的反经线没有。

任何帮助将不胜感激。

【问题讨论】：

标签： d3.js zooming pan

【解决方案1】：

苹果产品上的谷歌地图就是这样工作的。卷轴离开，你会离开一个澳大利亚，然后找到一个又一个又一个

【讨论】：

【解决方案2】：

我最终解决了同样的问题。这是an example (see code)，您可以在其中向左/向右平移以旋转投影（带有环绕），向上/向下平移以平移（由最大绝对纬度限制），也可以缩放。确保投影始终适合视图框。

我学到了很多关于缩放行为以及投影中心（）和旋转（）交互的知识。

【讨论】：

太棒了！看起来很棒。干得好，非常感谢。我可以看到你有一些（对我来说）复杂的代码。我将不得不花一些时间来研究它，但是，这看起来正是我想要实现的目标。干杯。
基本技巧只是将鼠标平移分为上/下地图平移和左/右地图旋转。它实际上有点类似于我前一段时间玩的[3D轨迹球旋转地球]（gist.github.com/patricksurry/5721459）。
这真是太好了。感谢发帖。

【解决方案3】：

希望这段代码可以解决你的问题

    var projection = d3.geo.equirectangular()
    .center([0, 5])
    .scale(90)
    .translate([width / 2, height / 2])
    .rotate([0, 0])
    .precision(9);

【讨论】：

抱歉，这个投影也存在同样的问题。不过，上面 patriksurry 提供的答案做得很好。干杯