javascript - 使用 topojson 和 D3 映射数据

Question

这是我使用 D3 库创建美国各县 map 的第一个实现。

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>

<svg width="960" height="600"></svg>

<script>

  'use strict';

   let path = d3.geoPath();

   let svg = d3.select("svg");

    d3.queue()
      .defer(d3.json, "https://d3js.org/us-10m.v1.json")
      .await(ready)


    function ready(error, us) {

      if (error) throw error;

      svg.append("g")
        .attr("class", "counties")
        .selectAll("path")
        .data(topojson.feature(us, us.objects.counties).features)
        .enter().append("path")
        .attr("d", path)

    }

简单直接。有用。但是，当我将 src 更改为更好的 json 时，其中包含每个县对象的 props 中的名称:

d3.queue()
 .defer(d3.json, "https://gist.githubusercontent.com/NealTaylor715/a08cc300e661aa45c464fa1e553b6f33/raw/eaa03db6827f2d6435b3898cae6fba03d6f55956/USCounties.json")
 .await(ready);

map 损坏了。我得到一个带有灰色小 Blob 的空白 SVG。奇怪的是，数据附加到路径中，但不是我想象的那样。有什么指点吗？我的新 JSON 格式是否不正确？对象的 properties 属性上的名称对于我要实现的功能来说是必需的。任何帮助将不胜感激。预先感谢您。

Answer 1

两种数据源的格式均正确，但在某一方面有所不同，一种是投影的，另一种则不是。

第一个代码块中的数据集已经被投影，也就是说它已经从 3 维椭球上的点转换为笛卡尔平面上的点。我们可以看出它们不是纬度经度对作为坐标，当转换为常规geojson时，显示诸如 ...[649.7055250753067,200.18804561250514]...

第二个代码块中的数据集未投影(或使用 WGS84 或其他一些数据“投影”)。它由代表北/南度数和东/西度数的点组成。将此 topojson 转换为常规 geojson，我们看到的坐标如下: ...[-167.36922883183183,53.30289293393393]...

使用已投影的数据，并且没有 geoTransform( API documentation 、 example )，您只需获取数据集中的坐标并将其转换为 SVG 坐标空间，无需进行任何转换。

对于未投影的数据，您需要使用投影(例如 d3.geoAlbers)来正确缩放和转换您的经纬度对(椭圆体上的点)到平面上的 x,y 点。