d3.geo.path 矩形包裹错误的方式答案

【问题标题】：d3.geo.path rectangle wrapping the wrong wayd3.geo.path 矩形包裹错误的方式
【发布时间】：2016-02-05 01:41:01
【问题描述】：

这个简单的 geojson 矩形在一些 geojson 查看器中正确显示，我得到了一个预期的矩形。但是当我用 d3 做它时，矩形似乎环绕。

var polygonData = {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [ -100, -20 ],
            [ -100, 20 ],
            [ 100, 20 ],
            [ 100, -20 ],
            [ -100, -20 ]
          ]
        ]
      },
      "properties": {}
    };
    
    var width = 1000;
    var height = 500;
    
    var projection = d3.geo.equirectangular()
      .scale(100)
      .translate([width / 2, height / 2])
      .rotate([0, 0])
	  .center([0, 0])
      .precision(0);
    
    var path = d3.geo.path()
	  	.projection(projection);

    var svg = d3.select("body").append("svg")
      .attr({
        width: width,
      	height: height
      });

    svg.append('path')
      .datum(polygonData)
      .attr({
        d: path,
        fill: 'orange',
        opacity: 0.5
      });

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
  </style>
</head>

<body>

</body>

这是我通过geojson viewer 得到的：

但这就是我从上面的d3 code得到的：

颠倒缠绕顺序只会填充相反的形状，并不能解决问题。我猜这是一个逆子午线切割问题。一种解决方法是添加一些中间点以强制路径不环绕，但我需要能够使用更复杂的路径自动执行此解决方案。

知道如何将这个 geojson 与 d3 一起使用，并强制它像其他 geojson 查看器一样显示为地图上的一个简单矩形？

【问题讨论】：

从他默认的反子午线切割切换到小圆圈切割似乎可以解决问题：projection.clipAngle(181) stackoverflow.com/a/30996241/537080 我想知道是否更好的解决方法是使用投影流？

标签： d3.js geojson geo

【解决方案1】：

我不认为，D3 有什么可责备的；据我了解，错误的是其他 GeoJSON 查看器。作为一个生活在或多或少平坦的表面上的人，很容易被欺骗相信一个具有四个角的多边形，具有像您这样精心选择的坐标，应该看起来像一个矩形。在足够小的尺度上并给出合适的投影，这甚至适用于球面几何。但由于您的点几乎相隔半个地球，因此情况并非如此。

为了阐明这一点，我使用正交投影来显示一些地理特征以及您的多边形：

从这个视图可以明显看出，沿子午线的线是连接点[-100,-20] 和[-100,20] 的第一条边。从那一点[-100,20] 在墨西哥西北部的某个地方是great arc，即最短的连接，到下一点[100,20] 绕地球半个地球。然后该路径在南半球周围同样封闭。因此，多边形的轮廓是地球表面上按给定顺序连接所有点的最短路径。

虽然您的多边形是由它的坐标决定的，但它的外观将取决于所使用的投影。这是使用墨卡托投影的同一多边形的另一个视图：

【讨论】：

感谢您的精彩解释。我同意我得到的形状是连接点和填充形状的合乎逻辑的方式。但是我需要的表示仍然应该看起来像等角投影中的矩形。了解默认情况下 d3 将按照最短路径连接点，这使我找到了一种方法来迫使它走更长的路。使用 projection.clipAngle 似乎可行。
@Biovisualize Ab使用projection.clipAngle() 感觉就像在欺骗我。我认为这是一条危险的道路，因为它要显示所需的输出，它依赖于 1）通过将其设置为 >180 度来关闭剪辑，以及 2）通过设置 .precision(0) 来关闭自适应重采样。除了这些设置的副作用之外，如果这些先决条件中的任何一个发生变化，您的可视化就会中断。
我完全同意，但是在 equirectangular 位置在这个位置获得一个矩形的解决方案是什么？也许根本不使用 d3.geo.path？
@Biovisualize 沿着平行线画一条线会很繁琐，涉及到很多中间点。我认为这很值得提出一个新问题。这在很大程度上取决于你真正追求的是什么。甚至可能值得考虑使用未投影的矩形。但这又取决于你想用那个矩形实现什么。目前你的问题有点像XY problem。尝试解释您的实际问题，而不是您为什么认为您尝试的解决方案存在一些缺陷。
你是对的，我会关闭这个，你的回答是有道理的。我需要将其显示为“在地图上作为一个简单的矩形”，因为它是围绕某些特征的边界框，但标题和解释并不清楚。无论如何，我有一些解决方案：hacky 剪裁，作为非投影路径的简单绘图（而不是在我的 equirectangular 情况下工作的 geo.path），并且还为切割逻辑添加中间点以选择其他方式作为最短路径。谢谢！