用Topojson和D3映射数据

Question

，这是我使用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是否不正确。对象'属性上的名称属性是我要拍摄的功能的必要条件。任何帮助将不胜感激。预先感谢您。

Answer 1

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

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

显示点

您的第二个代码块中的数据集未投影(或使用WGS84或其他一些基准为"投影"(。它由代表北/南/西部学位的点组成。将此topojson转换为常规geojson，我们会看到坐标，例如： ...[-167.36922883183183,53.30289293393393]...

使用已经投射的数据，并且没有地理转换(API文档，示例(，您只是将数据集中的坐标带入数据集中并将它们转换为SVG坐标空间而无需转换。

使用未投影的数据，您需要使用一个投影，例如d3.GeoAlbers，以正确缩放和转换您的LAT长对，椭圆形上的点点，x，y点在飞机上。