D3 GeoJSON仅在矩形中渲染部分地图[重复]答案

【问题标题】：D3 GeoJSON only render partial map in rectangle [duplicate]D3 GeoJSON仅在矩形中渲染部分地图[重复]
【发布时间】：2021-01-12 16:16:20
【问题描述】：

目前我正在开发一个 D3 项目来使用 GeoJSON 渲染地图。我在网上找到了这个很好的例子https://bl.ocks.org/john-guerra/43c7656821069d00dcbc

并尝试使用我的 GeoJSON 地图来实现，而当我根据新的 JSON 文件编辑参数时，html 仅呈现部分地图并显示在一个矩形中。我试图检查代码，但不知道哪里出错了。请分享一些我可以正确显示地图的提示。完整代码在 git https://github.com/gracemagy/singapore-map-D3

提前谢谢你！

这是我从原始脚本编辑的代码：

更新了目标 JSON 文件名

d3.json('electoral-boundary-dataset.geo.json', function(error, mapData) {
  var features = mapData.features;

d.properties.NOMBRE_DPT 到 d.properties.Name

function nameFn(d){
  return d && d.properties ? d.properties.Name : null;
}

scale(1500) 到 scale(50) 缩小地图

var projection = d3.geo.mercator()
  .scale(50)

【问题讨论】：

你有一个缠绕问题 - 通常这不是问题，大多数库使用平面坐标，这意味着只有一种方法可以缠绕多边形以使其闭合。 D3 使用球面几何，每个多边形有两种缠绕方式。请参阅this 获取解决方案，或查看this 获取更手动的解决方案，该解决方案需要对您的示例进行一些调整。或者，找到一个新的 geojson 是一个选项，如下面的答案所示。
Here's 一个将第一个解决方案适应您的地图的示例（使用适当的比例并在地图上居中 - 如果比例为 50，除非添加笔划宽度，否则您将看不到您的要素）。
@AndrewReid 是的，您说得对，这是一个令人费解的问题。我可以使用您共享的示例填充地图。 :D

标签： javascript json d3.js geojson

【解决方案1】：

在我看来，您的 geoJSON 可能有问题。就像它在地图周围有一个框架，也许这就是你正在看的那个正方形。如果您将示例的填充设置为“无”并绘制笔划，您会看到您的地图在这个大方形框架内看起来很小。

正如@andrew-reid 评论的那样，这似乎是一个棘手的问题。检查他对原始答案的评论

使用geoJSON from this bl.ock 我能够制作这个示例：

https://observablehq.com/d/21415ae86b8e5610

这并没有你想要的一切，但至少显示了地图。请注意它如何使用适合所有宽度和高度的投影

  var projection = d3.geoMercator().fitSize([width, height], geoJSON);

另外，尽量不要使用 d3.v3，它太旧了。

这是一个工作版本：

https://observablehq.com/@john-guerra/geojson-singapur

【讨论】：

请注意：fitSize 不适用于 d3v3（您主张从其升级），fit 方法是从 d3v4 开始引入的。此外，geojson 不包含矩形，矩形是缠绕顺序的产物：通过缠绕错误的方式，多边形覆盖了世界其他地方，而不是感兴趣的区域。自 D3 使用以来唯一的一个问题是将给予投影的坐标视为球体上的 3D 点。
@John Alexis Guerra Gómez 感谢您的意见！不幸的是，我必须使用原始的 geoJSON，因为 2017 年的地图不再有效。正如 Andrew 所分享的，我发现这是一个令人费解的问题。您是否可以将原始 geoJSON 与倒带配置编码到您的示例代码中？
感谢@AndrewReid 的反馈。我今天学到了一些东西?。抱歉 Grace0t0，我没有那么多空闲时间