为什么这个 TopoJSON 用 D3 渲染得这么小？（简单示例）答案

【问题标题】：Why is this TopoJSON rendered so small with D3? (Simple example)为什么这个 TopoJSON 用 D3 渲染得这么小？（简单示例）
【发布时间】：2018-03-01 19:57:35
【问题描述】：

我正在尝试做一些非常简单的事情。我有一个纽约所有国会选区的 GeoJSON 文件，我只是希望能够在我的 SVG 元素中查看它。我将它转换为 TopoJSON 并尝试关注this tutorial（除了我尝试使用新更新的 d3 v4 API）。主要问题是地图，我认为，确实被渲染了，但它非常小。如果我尝试放大它，那么我会完全看不到地图。

这是我的 html 和 d3 js：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>NY State Districts Demo</title>
    </head>
    <body>
        <h1>Hello</h1>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.js"></script>
        <script>
            /* JavaScript goes here */
            var width = 960, height = 1160;
            var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

            d3.json("./ny_bounds.json", function(error, ny){
                if(error) return console.error(error);
                console.log(ny);
                svg.append("path")
                    .datum(topojson.feature(ny, ny.objects.ny_bounds))
                    .attr("d", d3.geoPath().projection(d3.geoAlbersUsa()));
            });
        </script>
    </body>
</html>

Here 是相关 TopoJSON 的链接。

我承认我对 d3 和 geo/topoJSON 了解不多，但我只是停留在这一点上。如果有人有任何资源可以让我更多地了解这些主题，那也很棒。但正如我之前所说，主要问题是地图太小，我似乎无法居中/缩放它。

提前感谢您的帮助。

【问题讨论】：

嘿伙计，我正在为我正在开始的组织从事类似类型的项目。我们应该从 stackoverflow 链接起来，这样我们就可以在可能的情况下互相帮助。

标签： javascript html d3.js geojson topojson

【解决方案1】：

您正在使用旨在投影整个美国（包括夏威夷和阿拉斯加）的点的投影来投影数据。纽约将是这个投影区域的一小部分。缩放任何地图投影都会向投影的中心放大 - d3 不知道放大到特定位置，因此当您放大时，纽约将脱离投影的边缘。

由于 AlbersUsa 投影是复合投影（允许包含阿拉斯加、夏威夷），它实际上是多个 Albers 投影组合在一个平面上。由于其复合性质，它更难操作。为简单起见，我建议使用普通的 Albers 投影。这也允许您根据纽约州调整投影。

Albers 投影有两条标准纬线，它们是与地球表面相交的投影平面的平行线（它是圆锥投影）。标准纬线应位于感兴趣的区域，一个在下半部分，一个在上半部分（因为这些是与地球相交的纬线，因此这些纬线的变形最小化）。对于纽约州，北纬 41 度和 44 度这样的平行线可以工作。

您还需要使投影居中。为此，您需要您感兴趣区域的地理中心。纽约市中心位于北纬 42.954 度，西纬 75.527 度（东经 -75.527 度）。要使 Albers 投影居中，请在 x 上旋转（当我们在我们下方旋转地球时，按经度的倒数）并以 y 为中心。这看起来像：

d3.geoAlbers()
  .center([0,42.954])
  .rotate([75.527,0])
  .parallels([41,44])
  .translate([width/2,height/2])
  .scale(k) // scale factor

现在您需要确保您的 geoPath 使用此投影（是的，如果您的宽度或高度不是默认的 960x500，您需要指定平移，因为这会以投影的中心为中心）。比例会随着数字放大，2000 倍应该可以帮助您入门。

【讨论】：

感谢您提供有关如何得出这些数字的信息和详细回复。在为某个区域寻找正确的平行线时，您是否碰巧拥有参考的资源？