Масштабирование карты: zoom на geoPath

Географическая визуализация и роль geoPath

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

Базовая связка выглядит следующим образом:

  • projection — преобразует географические координаты (долгота/широта) в двумерные координаты
  • geoPath — преобразует геометрию GeoJSON в SVG-path
  • SVG — контейнер, в котором происходит рендеринг

Ключевая особенность: geoPath не хранит состояние масштаба самостоятельно. Масштабирование реализуется через изменение параметров проекции или через трансформации SVG-контейнера.

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

Минимальная конфигурация карты строится вокруг проекции:

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

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

svg.selectAll("path")
  .data(geojson.features)
  .enter()
  .append("path")
  .attr("d", path);

На этом этапе карта статична: все координаты рассчитаны один раз через projection.

Подходы к zoom: концептуальная модель

Существует два основных способа реализовать масштабирование:

  1. Масштабирование через трансформацию SVG (transform)
  2. Масштабирование через модификацию projection

Оба подхода применяются в зависимости от задачи.

Масштабирование через d3.zoom и transform

Наиболее распространённый метод — использование d3.zoom, который изменяет матрицу трансформации SVG-контейнера.

const zoom = d3.zoom()
  .scaleExtent([1, 8])
  .on("zoom", zoomed);

svg.call(zoom);

function zoomed(event) {
  g.attr("transform", event.transform);
}

Структура SVG:

<svg>
  <g class="map-layer">
    <!-- пути стран -->
  </g>
</svg>

Все географические элементы помещаются в <g>, который и трансформируется.

Математика transform

event.transform содержит:

  • k — коэффициент масштаба
  • x, y — смещение

Фактически применяется аффинное преобразование:

x' = kx + tx
y' = ky + ty

SVG выполняет это аппаратно, без пересчёта геометрии.

Проблема при использовании только transform

Несмотря на простоту, есть ограничения:

  • координаты остаются неизменными
  • подписи и интерактивные элементы могут масштабироваться некорректно
  • сложно реализовать адаптивную плотность деталей (LOD)

Масштабирование через projection (географически корректный zoom)

Альтернативный подход — изменение параметров проекции.

function zoomed(event) {
  const { transform } = event;

  projection
    .scale(150 * transform.k)
    .translate([
      width / 2 + transform.x,
      height / 2 + transform.y
    ]);

  svg.selectAll("path")
    .attr("d", path);
}

Здесь происходит полный пересчёт геометрии через geoPath.

Почему это работает

geoPath всегда использует актуальную проекцию:

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

При каждом изменении projection:

  • пересчитываются все координаты
  • сохраняется географическая точность
  • масштабирование становится «геодезически осмысленным»

Сравнение двух подходов

Transform-based zoom

Преимущества:

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

Недостатки:

  • нет адаптации уровня детализации
  • сложно работать с текстом и слоями
  • возможны артефакты при больших масштабах

Projection-based zoom

Преимущества:

  • корректная географическая интерпретация
  • возможность LOD (level of detail)
  • точное управление отображением

Недостатки:

  • дорогая перерисовка
  • нагрузка на большие GeoJSON

Гибридный подход (практический стандарт)

В сложных картах применяется комбинированная модель:

  • transform — для мгновенного отклика
  • projection update — для финальной стабилизации
function zoomed(event) {
  g.attr("transform", event.transform);

  projection.scale(baseScale * event.transform.k);

  requestAnimationFrame(() => {
    g.selectAll("path").attr("d", path);
  });
}

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

Центрирование и фиксация фокуса

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

D3.js предоставляет event.transform уже с учётом точки фокуса:

const zoom = d3.zoom()
  .on("zoom", (event) => {
    g.attr("transform", event.transform);
  });

Но при работе с projection важно корректировать translate:

projection.translate([
  width / 2 + event.transform.x,
  height / 2 + event.transform.y
]);

Ограничение масштабирования

d3.zoom()
  .scaleExtent([1, 10])

Где:

  • минимальный масштаб предотвращает «отдаление в пустоту»
  • максимальный — ограничивает детализацию и нагрузку

Интеграция с GeoJSON слоями

При работе с несколькими слоями (страны, города, дороги):

const layers = g.selectAll("g.layer")
  .data(dataLayers)
  .enter()
  .append("g")
  .attr("class", d => d.type);

Zoom применяется к контейнеру:

g.attr("transform", event.transform);

Работа с текстовыми метками

Тексты не всегда должны масштабироваться линейно:

labels.attr("transform", event.transform)
  .style("font-size", `${10 / event.transform.k}px`);

Это предотвращает визуальное «разрастание» подписей.

Производительность при больших наборах данных

При тысячах геометрий:

  • предпочтительно использовать canvas вместо SVG
  • или разделять слои (static/dynamic)
  • или применять spatial indexing

SVG начинает деградировать при большом количестве DOM-узлов.

Использование clipPath при zoom

Для ограничения области отображения:

svg.append("clipPath")
  .attr("id", "map-clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);

g.attr("clip-path", "url(#map-clip)");

Это предотвращает выход элементов за границы viewport при трансформациях.

Координация zoom и interaction

При наличии событий click/hover:

.on("click", (event, d) => {
  const [x, y] = path.centroid(d);

  svg.transition()
    .duration(750)
    .call(zoom.transform, d3.zoomIdentity.translate(width/2 - x, height/2 - y).scale(4));
});

Используется программное управление zoom через zoom.transform.

Динамическая детализация (LOD)

При увеличении масштаба можно переключать детализацию данных:

if (event.transform.k > 3) {
  loadDetailedGeojson();
}

Это снижает нагрузку и улучшает UX.

Итоговая архитектура карты с zoom

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

  • SVG контейнер
  • группа g для всех гео-объектов
  • d3.geoProjection
  • d3.geoPath
  • d3.zoom обработчик
  • слой подписей отдельно

Такой подход обеспечивает:

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