Question

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

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

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

另外，我需要展示马耳他的缩放，这样你才能真正看到它的等级颜色。

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

....
<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投影并相应地修改它，还是在创建路径后以某种方式对它们进行转换？或许还有其他一些我尚未想过的东西？

谢谢，

Answer 1

我不会乱用实际的形状文件，只需创建一个新的投影。美国伟业的实施并不太棘手：

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)

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

2 个答案: