Линии и маршруты на карте: d3.geoGraticule()

Географические линии на карте в D3 строятся поверх проекций и представляют собой результат преобразования геодезических координат в экранные. Визуализация маршрутов, параллелей и меридианов опирается на географический стек D3.js, где ключевую роль играет генерация геометрии и её последующее отображение через d3.geoPath().

Географическая сетка (graticule) — это регулярная система линий широты и долготы, формирующая каркас карты. Она не несёт смысловой нагрузки данных, но задаёт визуальную ориентацию, позволяя сопоставлять объекты в пространстве.

В D3 сетка создаётся с помощью d3.geoGraticule(), который генерирует GeoJSON-геометрию типа MultiLineString. Эти линии затем проходят через географическую проекцию и отрисовываются как SVG-пути.

Базовая структура:

const graticule = d3.geoGraticule();

По умолчанию создаётся сетка с шагом 10° по широте и долготе, охватывающая весь глобус.

Геометрия d3.geoGraticule()

Функция d3.geoGraticule() возвращает генератор, который можно настраивать:

шаг по долготе и широте
границы отображаемой области
наличие внешней рамки (outline)

Основные параметры:

const graticule = d3.geoGraticule()
  .step([10, 10])
  .extent([[-180, -90], [180, 90]]);

step([x, y])

Определяет интервал между линиями:

x — шаг долгот (меридианы)
y — шаг широт (параллели)

Например, шаг 5° создаёт плотную сетку, подходящую для детализированных карт:

d3.geoGraticule().step([5, 5]);

extent([[λ1, φ1], [λ2, φ2]])

Ограничивает область генерации линий. Это особенно важно для региональных карт.

d3.geoGraticule()
  .extent([[20, 30], [50, 60]]);

В этом случае сетка строится только внутри заданного прямоугольника в географических координатах.

extentMajor и stepMajor

Дополнительные параметры позволяют выделять более толстые линии:

stepMajor — шаг основных линий
extentMajor — область основных линий

d3.geoGraticule()
  .stepMinor([2, 2])
  .stepMajor([10, 10]);

Это используется для визуального разделения структуры сетки: тонкие линии для деталей, толстые — для ключевых делений.

Отрисовка сетки через d3.geoPath()

Генерация геометрии — только первый этап. Для отображения используется географический путь:

const projection = d3.geoMercator()
  .scale(150)
  .translate([width / 2, height / 2]);

const path = d3.geoPath().projection(projection);

После этого сетка добавляется в SVG:

svg.append("path")
  .datum(graticule())
  .attr("d", path)
  .attr("fill", "none")
  .attr("stroke", "#ccc")
  .attr("stroke-width", 0.5);

Метод .datum(graticule()) передаёт GeoJSON-объект, содержащий линии сетки.

Различие между graticule и маршрутами

Сетка координат — статическая структура. Маршруты и линии движения — динамические геометрические объекты.

Маршруты как LineString

Маршруты обычно задаются через GeoJSON LineString:

const route = {
  type: "LineString",
  coordinates: [
    [37.6173, 55.7558],
    [30.3351, 59.9343]
  ]
};

Отрисовка:

svg.append("path")
  .datum(route)
  .attr("d", path)
  .attr("fill", "none")
  .attr("stroke", "red")
  .attr("stroke-width", 2);

Здесь ключевое отличие: линии маршрутов зависят от данных, а graticule — от математической структуры координатной системы.

Геодезические линии и интерполяция

При соединении точек на сфере прямая линия на экране не всегда соответствует кратчайшему пути на поверхности Земли. D3 учитывает это через географические проекции.

Для более точных маршрутов используется интерполяция:

const interpolate = d3.geoInterpolate(
  [37.6173, 55.7558],
  [139.6917, 35.6895]
);

Это позволяет строить промежуточные точки вдоль великого круга.

Совмещение graticule и маршрутов

Типичная карта содержит оба слоя:

Сетка координат (graticule)
Географические объекты (страны, города)
Маршруты

Порядок отрисовки критичен:

svg.append("path")
  .datum(graticule())
  .attr("d", path)
  .attr("fill", "none")
  .attr("stroke", "#e0e0e0");

svg.append("path")
  .datum(worldGeoJSON)
  .attr("d", path)
  .attr("fill", "#f5f5f5")
  .attr("stroke", "#999");

svg.append("path")
  .datum(route)
  .attr("d", path)
  .attr("stroke", "steelblue");

Сетка всегда рисуется первой, иначе она перекроет данные.

Настройка внешней рамки graticule

d3.geoGraticule() поддерживает генерацию внешнего контура:

const graticule = d3.geoGraticule()
  .step([10, 10])
  .outline(true);

Контур создаёт замкнутую линию вокруг области сетки, что полезно для визуального ограничения карты.

Управление плотностью сетки

Выбор шага напрямую влияет на восприятие карты:

1–2° — высокая детализация, перегружает визуализацию
5–10° — стандартный баланс
15–30° — схематичное представление

Плотность часто адаптируется под масштаб проекции:

function getStep(scale) {
  if (scale > 200) return [2, 2];
  if (scale > 100) return [5, 5];
  return [10, 10];
}

Привязка graticule к изменению масштаба

При интерактивном зуме сетка может пересчитываться:

function update() {
  svg.selectAll("path.graticule")
    .datum(graticule())
    .attr("d", path);
}

Это позволяет сохранять корректную визуальную плотность при изменении масштаба проекции.

Использование с различными проекциями

d3.geoGraticule() независим от проекции, но визуальный результат зависит от неё:

d3.geoMercator() — искажение к полюсам
d3.geoOrthographic() — глобус без искажений
d3.geoNaturalEarth1() — компромиссная проекция

На ортографической проекции сетка приобретает дугообразный вид:

const projection = d3.geoOrthographic()
  .scale(250)
  .translate([width / 2, height / 2]);

Стилизация линий сетки

Визуальная иерархия строится через CSS или SVG-атрибуты:

.attr("stroke", "#bbb")
.attr("stroke-opacity", 0.6)
.attr("stroke-width", 0.7)

Для выделения основных линий можно использовать два слоя:

const graticuleMinor = d3.geoGraticule().step([2, 2]);
const graticuleMajor = d3.geoGraticule().step([10, 10]);

Линии маршрутов как временные или потоковые данные

Маршруты часто используются для визуализации потоков:

миграция
транспортные связи
интернет-трафик
логистика

В таких случаях толщина линии может кодировать интенсивность:

.attr("stroke-width", d => scale(d.value))

Анимация движения вдоль маршрута

Для создания эффекта перемещения используется интерполяция координат:

const t = 0.3;

const point = interpolate(t);

Далее точка может быть отображена как маркер, движущийся по линии маршрута.

Комбинирование сетки и потоков

Сетка выполняет роль координатного каркаса, маршруты — смыслового слоя. Их совместное использование позволяет:

оценивать расстояния
визуально сравнивать направления
выявлять географические кластеры

При высокой плотности данных сетка становится вспомогательным инструментом ориентации, а маршруты — основным носителем информации.

Геометрическая природа graticule

Внутренне d3.geoGraticule() строит линии как набор сегментов по меридианам и параллелям. Каждая линия — это цепочка координат, которая затем проходит через проекцию.

Это означает, что:

сетка не хранится как изображение
она пересчитывается при каждом рендере
её форма зависит от выбранной проекции

Такая модель обеспечивает гибкость при интерактивной работе с картой.

Практическая структура слоёв карты

Типичная архитектура SVG-карты:

Фон (океаны или прямоугольник)
Graticule (координатная сетка)
География (страны, регионы)
Маршруты (линии связей)
Объекты (точки, маркеры)
Подписи

Каждый слой изолирован и управляется отдельно через d3.selection().

Поведение при перекрытии линий

При пересечении маршрутов и сетки важна визуальная иерархия:

graticule — низкая контрастность
маршруты — высокая насыщенность
ключевые маршруты — увеличенная толщина

Так достигается читаемость даже при плотной визуализации.