我玩过d3js(v5)地图,
我正在尝试生成这张地图(屏幕截图是从随机网站上截取的),
对于我的特殊情况,无需介绍南极洲.

我在这里阅读了文档：https://github.com/d3/d3-geo#projections,
然后按照说明进行操作并使用了geoMercator,得到了这张平面地图,该地图由于某种原因在北顶被截断.

获取第一张地图布局的正确方法是什么？
有什么建议么？

解决方法:

您正在查看的投影是Mercator投影.

使用d3.geoMercator(),比例值是从形成投影表面的圆柱体的圆周得出的.比例值是每个弧度的像素数.默认值预计将圆柱的360度拉伸到960像素以上：960 / Math.PI / 2.

对于垂直角距离,没有这样的缩放因子,因为当人们移动到极端经度时,点之间的角距离会越来越大,从而使极点在y轴上将为±无穷大.由于这种墨卡托投影,尤其是网络墨卡托投影通常在±〜85度处被截断.墨卡托的范围为[-180,85]和[180,-85],为正方形.

此限制已合并到d3-geoMercator中,它定义了默认的projection.clipExtent,以便将世界投影到一个正方形,裁剪成大约±85°的纬度.(docs)”

这意味着,如果我们要显示960 x 960像素的d3-geoMercator的完整范围,则可以使用：

d3.geoMercator()
 .scale(960/Math.PI/2)  // 960 pixels over 2 π radians
 .translate([480,480])  // the center of the SVG/canvas

这给了我们：

d3-geoMercator的默认中心为[0°,0°],因此,如果我们希望[0°,0°]位于SVG /画布的中间,我们会平移中心使其位于中间,的翻译为[width / 2,height / 2]

现在我们正在显示整个世界,我们可以进行精炼以仅显示我们想要的部分.最简单的方法可能只是从svg /画布的底部移开像素.使用上面的代码,画布/ svg的高度为700像素(并保持960像素,使用相同的比例和平移),我得到：

我没有从此图像中删除南极洲-只是发生了它被切除而不必将其滤除的情况(这不一定是理想的做法：仍然被绘制).

因此,SVG /画布的宽度为960,高度为700,投影比例为960 / Math.PI / 2,平移[480,480]似乎是可以的.这些值将针对不同的视口大小一起缩放.

使用地图时,通常需要花很多时间才能获得所需的视觉效果,调整projection.translate()或projection.center()可以帮助将地图移至所需位置.但是我们可以通过计算来做到这一点.在这里,我将介绍一种使用projection.fitSize()的方法(尽管如果没有额外的步骤,这将无法解决所需的宽高比).

Project.fitSize([width,height],geojson)接受一个数组,该数组指定SVG / canvas和geojson对象的尺寸,并调整投影比例并转换值,以便geojson功能包含在SVG / canvas中. geojson功能可能是您要显示的世界的边界框,因此您可以使用：

projection.fitSize([width,height], {
    type: "Polygon",
    coordinates: [[ 
      [-179.999,84] , 
      [-179.999,-57] , 
      [179.999,-57] , 
      [179.999,84], 
      [-179.999,84] 
     ]]
   })

格陵兰岛的北端以北约84度,南端约56度为南美洲尖端.这样可以确保您想要看到的整个世界都可见.但是,如上所述,这并不考虑方面,因此,如果将上述范围限制为正方形尺寸,则仍将显示墨卡托的整个范围.