为什么这个 TopoJSON 用 D3 渲染得这么小？（简单的例子）

Question

我正在尝试做一些非常简单的事情。我有纽约所有国会选区的 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 的 link。

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

在此先感谢您的帮助。

Answer 1

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

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

阿尔伯斯投影有两条标准纬线，它们是与地球表面相交的投影平面的平行线（它是圆锥投影）。标准纬线应位于感兴趣的区域，一条在下半部分，一条在上半部分（因为这些是与地球相交的纬线，所以沿着这些纬线的失真会最小化）。对于纽约州，北纬 41 度和 44 度等纬线可能有效。

您还需要使投影居中。为此，您需要感兴趣区域的地理中心。纽约中心位于北纬 42.954 度和西经 75.527 度（东经 -75.527 度）。要使阿尔伯斯投影居中，请在 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 倍应该让你开始。

为什么这个 TopoJSON 用 D3 渲染得这么小？（简单的例子）

Why is this TopoJSON rendered so small with D3? (Simple example)

html

javascript

geojson

d3.js

topojson

为什么这个 TopoJSON 用 D3 渲染得这么小？ （简单的例子）

Why is this TopoJSON rendered so small with D3? (Simple example)

html

javascript

geojson

d3.js

topojson

为什么这个 TopoJSON 用 D3 渲染得这么小？（简单的例子）