在 D3 v4 中呈现 GeoJson 文件未正确缩放

Question

我正在尝试使用 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。

预期结果应如下所示：

Answer 1

问题出在你的geojson:

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

此数据为投影数据，即使用二维笛卡尔坐标系。 D3 投影使用经纬度对（3 维地球上的点），值不超过 180 度 east/west 和 90 度 north/south。 D3 中的经纬度对应该使用的特定椭圆体在 WGS84 基准中定义。 D3 期望地理数据位于此坐标 space 内。

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

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

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

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

在 D3 v4 中呈现 GeoJson 文件未正确缩放

Rendering GeoJson file in D3 v4 is not scaling properly

d3.js

geojson

qgis