欧洲的 D3 地图投影，如 Albert USA

Question

我对 D3.js 还是很陌生，到目前为止，我已经能够在这里和那里搜索所有问题的答案，但我还没有找到任何关于这个问题的答案。

有一个非常漂亮的美国地图投影，显示阿拉斯加和其他地方移动到地图底部（美国阿尔伯斯）。

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

另外，我需要显示马耳他的放大图，以便您可以实际看到 choropleth 的颜色。

这是我的路径示例，从 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

你建议怎么做？ 我是否需要在创建时为每个图层创建几个不同的图层，是采用 albers USA 投影并相应地修改它还是在创建路径后以某种方式转换它们更好？ 或者也许还有其他我还没有想过的事情？

谢谢，

Answer 1

我不会弄乱实际的形状文件，只需创建一个新的投影。 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

您应该能够为欧洲创建版本。

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)