Учебники

D3.js — География

Декабрь 25, 2018

Геопространственные координаты часто используются для данных о погоде или населении. D3.js дает нам три инструмента для географических данных —

  • Пути — они производят конечные пиксели.

  • Проекции — они превращают сферные координаты в декартовы

  • Потоки — они ускоряют вещи.

Пути — они производят конечные пиксели.

Проекции — они превращают сферные координаты в декартовы

Потоки — они ускоряют вещи.

Прежде чем изучать географию в D3.js, мы должны понять следующие два термина:

  • D3 Geo Path и
  • Прогнозы

Давайте обсудим эти два термина в деталях.

D3 Geo Path

Это генератор географических маршрутов. GeoJSON генерирует строку данных пути SVG или отображает путь к Canvas. Холст рекомендуется для динамических или интерактивных проекций для повышения производительности. Чтобы сгенерировать D3 Geo Path Data Generator, вы можете вызвать следующую функцию. 

d3.geo.path()

Здесь функция генератора пути d3.geo.path () позволяет нам выбрать, какую проекцию карты мы хотим использовать для перевода гео-координат в декартовые координаты.

Например, если мы хотим показать детали карты Индии, мы можем определить путь, как показано ниже. 

var path = d3.geo.path()
svg.append("path")
   .attr("d", path(states))

Прогнозы

Проекции преобразуют сферическую многоугольную геометрию в плоскую многоугольную геометрию. D3 предоставляет следующие реализации проекции.

  • Азимутальная — Азимутальная проекция проецирует сферу прямо на плоскость.

  • Композитный — Композитный состоит из нескольких проекций, которые объединены в один дисплей.

  • Конический — проецирует сферу на конус, а затем разворачивает конус на плоскость.

  • Цилиндрические — цилиндрические проекции проецируют сферу на вмещающий цилиндр, а затем разворачивают цилиндр на плоскость.

Азимутальная — Азимутальная проекция проецирует сферу прямо на плоскость.

Композитный — Композитный состоит из нескольких проекций, которые объединены в один дисплей.

Конический — проецирует сферу на конус, а затем разворачивает конус на плоскость.

Цилиндрические — цилиндрические проекции проецируют сферу на вмещающий цилиндр, а затем разворачивают цилиндр на плоскость.

Для создания новой проекции вы можете использовать следующую функцию. 

d3.geoProjection(project)

Создает новую проекцию из указанного проекта необработанной проекции. Функция проекта принимает долготу и широту данной точки в радианах. Вы можете применить следующую проекцию в своем коде. 

var width = 400
var height = 400
var projection = d3.geo.orthographic() 
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
   .scale(100)
   .rotate([100,0,0])
   .translate([width/2, height/2])
   .clipAngle(45);

Здесь мы можем применить любой из вышеперечисленных прогнозов. Давайте обсудим каждый из этих прогнозов вкратце.

  • d3.geo.orthographic () — ортографическая проекция — это азимутальная проекция, подходящая для отображения одного полушария; точка зрения находится в бесконечности.

  • d3.geo.gnomonic () — Гномоническая проекция — это азимутальная проекция, которая проецирует большие круги как прямые линии.

  • d3.geo.equirectangular () — равносторонний является простейшей географической проекцией. Тождественная функция. Он не является ни равным по площади, ни конформным, но иногда используется для растровых данных.

  • d3.geo.mercator () — Сферическая проекция Меркатора обычно используется библиотеками плиточного отображения.

  • d3.geo.transverseMercator () — Поперечная проекция Меркатора.

d3.geo.orthographic () — ортографическая проекция — это азимутальная проекция, подходящая для отображения одного полушария; точка зрения находится в бесконечности.

d3.geo.gnomonic () — Гномоническая проекция — это азимутальная проекция, которая проецирует большие круги как прямые линии.

d3.geo.equirectangular () — равносторонний является простейшей географической проекцией. Тождественная функция. Он не является ни равным по площади, ни конформным, но иногда используется для растровых данных.

d3.geo.mercator () — Сферическая проекция Меркатора обычно используется библиотеками плиточного отображения.

d3.geo.transverseMercator () — Поперечная проекция Меркатора.

Рабочий пример

Давайте создадим карту Индии в этом примере. Для этого мы должны придерживаться следующих шагов.

Шаг 1 — Применение стилей — Давайте добавим стили в карту, используя код ниже. 

<style>
   path {
      stroke: white;
      stroke-width: 0.5px;
      fill: grey;
   }
   
   .stateTN { fill: red; }
   .stateAP { fill: blue; }
   .stateMP{ fill: green; }
</style>

Здесь мы применили определенные цвета для состояний TN, AP и MP.

Шаг 2 — Включить скрипт topojson — TopoJSON является расширением GeoJSON, который кодирует топологию, которая определена ниже. 

<script src = "http://d3js.org/topojson.v0.min.js"></script>

Мы можем включить этот скрипт в нашу кодировку.

Шаг 3 — Определите переменные — Добавьте переменные в ваш скрипт, используя код ниже. 

var width = 600;
var height = 400;
var projection = d3.geo.mercator()
   .center([78, 22])
   .scale(680)
   .translate([width / 2, height / 2]);

Здесь ширина SVG равна 600, а высота — 400. Экран — это двухмерное пространство, и мы пытаемся представить трехмерный объект. Таким образом, мы можем серьезно исказить размер / форму земли, используя функцию d3.geo.mercator () .

Указывается центр [78, 22], это устанавливает центр проекции в указанное местоположение в виде двухэлементного массива долготы и широты в градусах и возвращает проекцию.

Здесь карта была сосредоточена на 78 градусах западнее и 22 градусах севернее.

Масштаб указан как 680, это устанавливает масштабный коэффициент проекции к указанному значению. Если масштаб не указан, он возвращает текущий масштабный коэффициент, который по умолчанию равен 150. Важно отметить, что масштабные коэффициенты не согласованы между проекциями.

Шаг 4. Добавление SVG. Теперь добавьте атрибуты SVG. 

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

Шаг 5. Создание пути . Следующая часть кода создает новый генератор географических путей. 

var path = d3.geo.path()
   .projection(projection);

Здесь генератор пути (d3.geo.path ()) используется для указания типа проекции (.projection), который ранее был определен как проекция Меркатора с использованием переменной проекции.

Шаг 6 — Генерация данных — indiatopo.json — Этот файл содержит так много записей, которые мы можем легко загрузить из следующего приложения.

Скачать файл indiatopo.json

После того, как файл был загружен, мы можем добавить его в наше местоположение D3. Пример формата показан ниже. 

{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......

........................................

Шаг 7 — Нарисуйте карту. Теперь прочитайте данные из файла indiatopo.json и нарисуйте карту. 

d3.json("indiatopo.json", function(error, topology) {
   g.selectAll("path")
   .data(topojson.object(topology, topology.objects.states)
   .geometries)
   .enter()
   .append("path")
   .attr("class", function(d) { return "state" + d.id; })
   .attr("d", path)
});

Здесь мы загрузим файл TopoJSON с координатами для карты Индии (indiatopo.json). Затем мы объявляем, что будем действовать на все элементы пути в графике. Он определяется как g.selectAll («путь»). Затем мы извлечем данные, которые определяют страны, из файла TopoJSON. 

.data(topojson.object(topology, topology.objects.states)
   .geometries)

Наконец, мы добавим его к данным, которые мы собираемся отобразить, используя метод .enter (), а затем добавим эти данные в качестве элементов пути, используя метод .append («путь») .

53
Share: