使用 topojson 和 D3 映射数据答案

【问题标题】：Mapping data with topojson and D3使用 topojson 和 D3 映射数据
【发布时间】：2017-09-14 16:44:31
【问题描述】：

所以这是我第一次使用 D3 的库来创建包含美国县的地图。

<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 并使用每个县对象的道具中的名称时：

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

地图中断。我得到一个带有这个灰色小斑点的空白 SVG。奇怪的是数据附加到路径中，而不是我认为应该的方式。任何指针？我的新 JSON 是不是格式不正确。对象的 properties 属性上的名称是我所追求的功能所必需的。任何帮助将不胜感激。提前谢谢你。

【问题讨论】：

标签： javascript d3.js svg geojson topojson

【解决方案1】：

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

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

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

对于已经投影的数据，并且没有 geoTransform（API documentation、example），您只需获取数据集中的坐标并将它们转换为 SVG 坐标空间而不进行任何转换。

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

【讨论】：