D3多边形投影错误

Question

我有一个使用 D3 geoOrthographic 和 topoJSON 的工作世界投影。它旋转和一切。

我想在一个坐标处放置一个六边形形状，并根据它在地球上的位置进行投影，这很有效...除了我的形状真的很奇怪。我得到一个 5 边形，就像其中一个点丢失了一样，它随地球正确旋转。

然后还有一个围绕地球边缘的不旋转的圆。

我有一个抛出六边形坐标的函数，我已经尝试了几种比例和偏移，总是完全相同的行为。

let hex = svgOrbit.append("path")
    .datum({"type":"GeometryCollection","geometries":[{"type":"Polygon","coordinates":[[[6.732,6],[5,7],[3.268,6],[3.268,4],[5,3],[6.732,4]]]}]})
    .attr("d", myGeoOrthographicProjection);

无论我如何旋转，圆看起来都是这样，尝试六边形的方向没有那个缺失点。

该路径确实显示了具有这两个独立多边形的 d 属性。

我只是不明白这里发生了什么。甚至没有任何奇怪的数字，如零或 NaN 或坐标中的任何东西。整个星球投影正确，但一个六边形将它抛出一个循环？

Answer 1

外圈表示您有一个倒置的多边形：您正在绘制减去预期特征的世界特征。由于 d3 在计算投影时使用球面数学，缠绕顺序很重要，这与大多数将球面坐标视为笛卡尔坐标（即使在投影时）的地理工具相反。下面的第一张红色地图通过应用填充显示了这一点。

缺失的一点有点奇怪，通常D3不会渲染无效的geojson语法，也不会在不渲染任何东西时抛出错误或警告。这里的问题是坐标数组中的最后一个点应该是第一个坐标。我忘记了它在规范中的什么位置，也根本没有考虑为什么 D3 会这样渲染它。当试图在 geojson.io 查看您的 geojson 时，我注意到它根本没有呈现，缺少端点。

我已经倒转坐标（懒惰地使用 .reverse()）并在右侧的地图中添加了额外的点。

let hex = {"type":"GeometryCollection","geometries":[{"type":"Polygon","coordinates":[[[6.732,6],[5,7],[3.268,6],[3.268,4],[5,3],[6.732,4]]]}]};

let hex2 = {"type":"GeometryCollection","geometries":[{"type":"Polygon","coordinates":[[[6.732,6],[5,7],[3.268,6],[3.268,4],[5,3],[6.732,4],[6.732,6]].reverse()]}]};



    
    
let projection = d3.geoOrthographic().scale(125).translate([125,125]);
let path = d3.geoPath(projection);

let svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 250);
  
svg
  .append("path")
  .datum(hex)
  .attr("d", path)
  .attr("fill", "crimson");
  
svg.append("g")
  .attr("transform","translate(250,0)")
  .append("path")
  .datum(hex2)
  .attr("d", path)
  .attr("fill","steelblue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

D3多边形投影错误

D3 polygon projection is wrong

geojson

d3.js