Javascript 在d3js中查找具有特定投影的世界地图

我玩过d3js（v5）地图， 我正在尝试生成这张地图（截图取自一个随机网站）， 对于我的特殊情况，没有必要介绍南极洲

我已经阅读了这里的文档：， 按照说明使用geoMercator得到了这张平面图，由于某种原因，它在北面的顶部被切断

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

---

有什么建议吗？

您看到的投影是一个投影

使用d3.geoMercator（），比例值是从构成投影面的圆柱体周长导出的。比例值是每弧度的像素数。默认值预期圆柱体的360度拉伸超过960像素：

960/Math.PI/2

对于垂直角距离，没有这样的比例因子，当一个人移动到极端经度时，点之间的角距离越来越大，因此极点在y轴上的位置将为±无穷大。由于这种情况，墨卡托，尤其是卷筒纸墨卡托经常被截断在±~85度。范围为[-180,85]和[180，-85]时，墨卡托为正方形

此限制包含在

d3 geoMercator

中，它“定义了一个默认的投影。clipExtent，以便将世界投影到一个正方形，剪裁到大约±85°纬度。（）

这意味着，如果我们想要显示d3 geoMercator的完整范围，跨越960 x 960像素，我们可以使用：

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

这给了我们：

< d3地理坐标中心的缺省中心为[ 0°，0°]，所以如果我们想要[ 0°，0°]位于SVG/画布的中间，我们将中心翻译成中间，翻译为<代码> [宽度/ 2，高度/ 2 ] < /代码>

现在，我们正在展示整个世界，我们可以改进以只展示我们想要的部分。最简单的方法可能只是从svg/画布的底部删除像素。使用上述画布/svg高度为700像素的代码（并保持960像素的宽度，使用相同的缩放和平移），我得到：

我并没有从这张图片中删除南极洲，只是碰巧它被剪掉了，而不需要过滤掉（这不一定是理想的做法：它仍然是画出来的）

因此，一个宽度为960、高度为700、投影比例为960/Math.PI/2、翻译为[480480]的SVG/Canvas似乎可以。这些值将根据不同的视口大小一起缩放

使用贴图时，通常需要大量的目测才能获得所需的视觉效果，调整

投影。平移（）

或

投影。中心（）

有助于将贴图移动到所需位置。但我们可以通过计算来实现。这里我将介绍一种方法，使用

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度大致是南美洲的尖端。这将确保您想要看到的世界的整个部分都是可见的。但是，如上所述，这并不考虑方面，所以如果你将上述范围限制为方方面面，你仍然会显示McCalter的全部范围。

首先，重要的是要清楚地表明D3中没有映射，D3只是方法的集合。也就是说，要删除南极洲，请查看地图文件中的属性：您可能有alpha 2或3 ISO代码。所以，只要过滤掉南极洲。例如：@Gerardo Furtado谢谢你的回复，我会过滤掉南极洲。这看起来确实很容易，但我如何才能显示地图的北部被切断？谢谢你详细的回答，它肯定清除了一些东西，我很感激：）！