3

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

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

我正在为nuts 2010 europe制作几张等值线地图(欧洲划分为较小区域的官方方式),我需要做一些类似的事情,在底部或右侧显示圭亚那和不同矩形中的一些岛屿组地图。有点像这样: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

你建议怎么做?我是否需要在创建时为它们中的每一个创建几个不同的图层,最好采用 albers USA 投影并相应地对其进行修改,还是在创建路径后以某种方式对其进行转换?或者可能是我还没有想到的其他事情?

谢谢,

4

2 回答 2

3

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

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

于 2013-05-28T14:48:43.723 回答
0

如果您查看此示例如何使用欧洲的阿尔伯斯投影,我相信您将能够轻松地将其调整为您的缩放、旋转和边界偏好:

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)
于 2020-09-02T09:54:23.943 回答