Сопоставление данных с помощью topojson и D3

Итак, вот моя первая реализация с использованием библиотеки 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 svg d3.js geojson topojson
person Neal Taylor    schedule 18.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Оба источника данных отформатированы правильно, но они различаются в одном отношении: один проецируется, а другой нет.

Набор данных в вашем первом кодовом блоке уже спроецирован, то есть уже преобразован из точек на трехмерном эллипсоиде в точки на декартовой плоскости. Мы можем сказать, что они не являются парами широта-долгота, поскольку координаты при преобразовании в обычный geojson показывают такие точки, как ...[649.7055250753067,200.18804561250514]...

Набор данных во втором блоке кода не проецируется (или «проецируется» с помощью WGS84 или других данных). Он состоит из точек, которые представляют градусы север/юг и градусы восток/запад. Преобразовывая этот топожсон в обычный геоджсон мы видим координаты типа: ...[-167.36922883183183,53.30289293393393]...

С уже спроецированными данными и без geoTransform (документация по API, пример), вы просто берете координаты из набора данных и конвертируете их в Координатное пространство SVG без преобразования.

С неспроецированными данными вам нужно использовать проекцию, такую ​​как d3.geoAlbers, чтобы правильно масштабировать и преобразовывать ваши пары широты и долготы, точки на эллипсоиде, в точки x, y на плоскости.

person Andrew Reid    schedule 18.04.2017