如何在 d3.js 中将地图置于本初子午线以外的位置？答案

【问题标题】：How to center a map on something other than the prime meridian in d3.js?如何在 d3.js 中将地图置于本初子午线以外的位置？
【发布时间】：2013-02-20 16:31:58
【问题描述】：

这是一个与this one（已为 ggplot2 回答）、this one（已为 R 回答）类似的问题，是this one（仍在寻找答案）的后续问题。

我怎么能使用 Mike Bostock (http://bl.ocks.org/mbostock/4987520) 最近的这个约束缩放图，但起始位置是太平洋而不是非洲？

像这样...

显然，只需调整代码中的 .translate([0, 0]) 值即可移动地图，但没有“包装”可以让地图如上所示。

我坚信必须有一种简单的方法来实现这一点，因为这似乎是一项基本能力，我只是看不到或找不到解决方案。

【问题讨论】：

您引用的 d3 示例在缩放对象上调用 .translate()。我还没有尝试过，但我认为，相反，在投影对象上调用 .translate() 可以解决问题。不过不知道这将如何与缩放行为交互。
我不太确定我是否理解正确。我调整的翻译位于var = projection 部分。我认为这个建议很有价值，但我尝试了很多变体，在不同的区域添加了.translate()，但没有运气。谢谢你的想法。这听起来是个不错的方向。

标签： maps d3.js

【解决方案1】：

好的，最后答案很明显，非常感谢Hashbang 的人，他们的帖子让我走上了正确的道路。

我遇到的问题是假设我需要使用.translate() 函数将地图移动到正确的位置，而实际上.translate() 函数只是移动返回地图上的点。因此，换句话说，它可以将您拥有的内容直接翻译到另一个位置（呃！）。

我应该做的是使用 .rotate 函数通过使用这样的函数来旋转地图的经度；

var projection = d3.geo.mercator()
    .translate([0, 0])
    .scale(width)
    .rotate([-180,0]);

这只是简单地将地图包裹起来并根据需要提供完全控制。一个功能齐全的例子是here。

【讨论】：