在 D3 v4 中渲染 GeoJson 文件无法正确缩放答案

【问题标题】：Rendering GeoJson file in D3 v4 is not scaling properly在 D3 v4 中渲染 GeoJson 文件无法正确缩放
【发布时间】：2017-09-08 19:30:52
【问题描述】：

我正在尝试使用 GeoJSON 数据渲染带有叠加层的地图。我已将数据加载到 QGIS 和 mapshaper 中，并且可以正确渲染；但是，我的 JavaScript 代码没有呈现我所期望的（整个 SVG 被填充，让我认为这是一个缩放问题。）

我相信我计算比例的代码是准确的。

var bounds = path.bounds(us),
        scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width, (bounds[1][1] - bounds[0][1]) /height),
        translation = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2, (height - scale * (bounds[1][1] + bounds[0][1])) / 2];

我已将示例项目上传到 plunker https://plnkr.co/edit/jzXRaOs2xXpZuJraMq3p。

预期结果应如下所示：

【问题讨论】：

标签： d3.js geojson qgis

【解决方案1】：

问题在于你的geojson：

... coordinates":[[[1983816.6475302426,681422.0990409602], ...

此数据是投影数据，即它使用二维笛卡尔坐标系。 D3 投影使用经纬度对（3 维地球上的点），其值不超过东/西 180 度和南北 90 度。 D3 中的 lat long 对应该使用的特定椭球在 WGS84 基准中定义。 D3 期望地理数据位于此坐标空间内。

如果您想使用问题中引用的自动缩放功能，则需要重新投影数据，使其位于 WGS84 中（或者，找到已经使用此空间参考系统的美国 geojson )。 mapshaper 等工具可以帮助在线转换数据（尽管您可能需要在应用任何转换之前指定数据使用的空间参考系统）。

另一种选择是使用geoTransform（v3 中的geo.transform）来缩放您已经投影的数据。由于您的数据在笛卡尔平面上已经是二维的，因此您可以简单地创建一个函数来缩放它以匹配您的 svg 坐标空间。我还没有考虑过为此的自动缩放功能，但它应该是可能的。在这里可以找到 geo.transform 的一个示例（具有类似的地理特征集）：

https://bl.ocks.org/andrew-reid/496078bd5e37fd22a9b43fd6be84b36b

（由于 mapshaper 和 qGIS 预计有多个不同的空间参考系统，如果在数据中指定了投影，它们将正常显示此数据，或者作为普通 x,y 数据，这就是为什么它可能会在其他平台上工作但不在 d3 投影中，它假设所有数据都是经纬度对）。

【讨论】：