D3欧洲地图投影，类似于美国阿尔伯特投影

Question

我对D3.js相当新，到目前为止，在这里和那里搜索都能找到问题的答案，但我还没有找到这个问题的答案。

有一个非常好的美国地图投影，显示了阿拉斯加和其他地方移到了地图底部（albers USA）。

我正在制作几个choropleth地图，用于2010年欧洲坚果（官方方式将欧洲分成较小的区域），我需要做类似的事情，显示圭亚那和一些岛屿群在不同的矩形中移到地图底部或右侧。 就像这样：http://whs.moodledo.co.uk/file.php/1378/Europe_Quality_of_Life/GDP_Europe_2004.png

此外，我需要展示马耳他的缩放，以便您可以实际看到它的颜色。

这是我的路径示例，从geojson中提取出来，一旦它们被q3.js计算：

....
<path id="ITI3" class="nut cat2" d="M519.439374985861..."></path>
<path id="ITI4" class="nut cat2" d="M496.3654726267817,575.02..."></path>
<path id="LT00" class="nut cat1" d="..."></path>
<path id="MT00" class="nut cat4" d="Z"></path>
<path id="LV00" class="nut cat1" d="M637.95Z"></path><path id="MT00" class="nut cat3" d="M517.0753838465" fill="#000"></path>
...

我需要移动和调整大小的坚果区域的ID是

FR91 (south america)
FR92 (south america)
FR93 (south america)
FR94 (somewhere close to madagascar)
MT00 (malta)
PT30
PT20
ES70

我该怎么做呢？在创建时，我需要为每个图层创建几个不同的图层，最好采用阿尔伯斯USA投影并相应地进行修改，还是在路径创建后进行某种变换？或者还有其他我尚未想到的方法吗？

谢谢。

- mirba

---

你可以使用墨卡托投影。我认为展示其他领土的最佳选择是制作单独的图表。你可以将组添加到主SVG图形中并对它们进行平移。这篇文章解释了如何在d3中正确制作地图：http://bost.ocks.org/mike/map/. - Pablo Navarro

我认为我需要比几个地图更高效的东西......特别是考虑到我需要准备的数量级。我正在寻找一种投影，或者一种修改投影的方法... - mirba

Answer 1

我建议不要动原始的shape文件，而是创建一个新的投影。实现Albert USA并不太复杂：

function albersUsa(location) {
  var longitude = location[0],
      latitude = location[1];
  return (latitude > 50 ? alaska
      : longitude < -140 ? hawaii
      : latitude < 21 ? puertoRico
      : lower48)(coordinates);
}

https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-albersUsa

你应该能够创建欧洲版本。

- Adam Pearce

---

谢谢Adam，这似乎是正确的路线（如果我有足够的声望，我会给你投一票）。有人知道如何在任何地方进行投影吗？ - mirba

这里提供了一些信息：https://github.com/d3/d3-plugins/tree/master/geo/projection不过，你最好直接阅读Albert USA的源代码：https://github.com/mbostock/d3/blob/master/src/geo/albers-usa.js完全透明化 - 我以前没有做过这个，但它看起来肯定是可行的。 - Adam Pearce

Answer 2

如果您查看此示例如何使用 Albers 投影来处理欧洲地区，我相信您可以轻松地根据自己的缩放、旋转和边界偏好进行调整：

https://observablehq.com/@toja/five-map-projections-for-europe#_albers

您只需要调整您的网页地图脚本中的参数（代码部分从上面复制）：

albers = d3.geoAlbers()
    .rotate([-20.0, 0.0])
    .center([0.0, 52.0])
    .parallels([35.0, 65.0])
    .translate([width / 2, height / 2])
    .scale(700)
    .precision(.1)

- Matt Sergej Rinc