D3.js - Географии

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

Paths - Они производят финальные пиксели.
Projections - Они превращают координаты сферы в декартовы координаты и
Streams - Они ускоряют процесс.

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

D3 Geo Path и
Projections

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

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 предоставляет следующие реализации проекции.

Azimuthal - Азимутальные проекции проецируют сферу прямо на плоскость.
Composite - Composite состоит из нескольких проекций, которые объединены в единый дисплей.
Conic - проецирует сферу на конус, а затем разворачивает конус на плоскость.
Cylindrical - Цилиндрические выступы проецируют сферу на содержащий цилиндр, а затем развертывают цилиндр на плоскость.

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

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() - Поперечная проекция Меркатора.

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

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

Step 1 - Apply styles - Давайте добавим стили на карту, используя приведенный ниже код.

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

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

Step 2 - Include topojson script - TopoJSON - это расширение GeoJSON, которое кодирует топологию, определенную ниже.

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

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

Step 3 - Define variables - Добавьте переменные в свой скрипт, используя приведенный ниже код.

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. Важно отметить, что масштабные коэффициенты не согласованы между проекциями.

Step 4 - Append SVG - Теперь добавьте атрибуты SVG.

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

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

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

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

Step 6 - Generate data - indiatopo.json - Этот файл содержит так много записей, которые мы можем легко загрузить из следующего приложения.

Скачать indiatopo.json file

После того, как файл был загружен, мы можем добавить его в нашу папку 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]]], ......

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

Step 7 - Draw map - Теперь прочтите данные из 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(“path”) метод.