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

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

从这一点上，我希望能够缩放和平移地图到我心中的愿望，但当我平移东或西时，我希望地图能够“滚动”，而不是到达世界的尽头（我希望这是有意义的）

我目前正在处理的代码在这里（或者在下面的Gist（）或block（）中）

正文{字体大小：11px；}
路径{
笔画：黑色；
笔划宽度：0.25px；
}
可变宽度=960，
速度=.005，
然后=Date.now（）
高度=475；
var projection=d3.geo.mercator（）
.center（[0,0]）
.比例尺（1000）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var path=d3.geo.path（）
.投影（投影）；
var g=svg.append（“g”）；
d3.json（“world-110m.json”，函数（错误，拓扑）{
g、 选择全部（“路径”）
.data（topojson.object（拓扑、拓扑、对象、国家）.geometrics）
.输入（）
.append（“路径”）
.attr（“d”，路径）
.样式（“填充”、“黑色”）
d3.计时器（函数（）{
var angle=速度*（Date.now（）-then）；
投影。旋转（[角度，0,0]）；
svg.selectAll（“路径”）
.attr（“d”，路径投影（projection））；
}); 
var zoom=d3.behavior.zoom（）
.on（“缩放”，函数（）{
g、 attr（“转换”、“转换”（+d3.event.translate.join）（“，”+”）比例（“+d3.event.scale+”）
});
调用（缩放）
});

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

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

---

任何帮助都将不胜感激。

苹果产品上的谷歌地图就是这样工作的。Scrol离开了，你将离开一个澳大利亚，然后找到另一个，另一个，还有另一个，我最终解决了同一个问题。这里是（），您可以向左/向右平移以旋转投影（使用环绕），向上/向下平移（使用最大绝对纬度夹紧），也可以使用缩放。确保投影始终适合viewbox

---

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

希望这段代码能解决您的问题

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

---

令人惊叹的！看起来不错。干得好，非常感谢。我可以看出你有一些（对我来说）复杂的代码。我将不得不花一些时间来研究它，但是，这看起来正是我想要实现的。干杯。最基本的技巧就是将鼠标平移分为上/下贴图平移和左/右贴图旋转。它实际上有点像我刚才玩的[3D轨迹球地球旋转]（），这真的很好。谢谢你的发帖。对不起，这个预测也存在同样的问题。不过，上面帕特里克斯利提供的答案做得很好。干杯

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