d3-zoom

Панорамирование и масштабирование — популярные методы взаимодействия, которые позволяют пользователю сосредоточиться на области интереса, ограничивая представление. Их легко освоить благодаря непосредственному манипулированию: перетаскивание для панорамирования (перевода), вращение колесика для масштабирования (масштабирования) или использование сенсорного ввода. Панорамирование и масштабирование широко используются в веб-картах, но также могут использоваться с визуализациями, такими как временные ряды и диаграммы рассеяния.

Поведение масштабирования, реализованное в d3-zoom, — удобная, но гибкая абстракция для включения панорамирования и масштабирования на выборках. Оно обрабатывает удивительное разнообразие событий ввода и особенностей браузера. Поведение масштабирования не зависит от DOM, поэтому вы можете использовать его с SVG, HTML или Canvas.

Поведение масштабирования также разработано для работы с d3-scale и d3-axis; см. transform.rescaleX и transform.rescaleY. Вы также можете ограничить масштабирование с помощью zoom.scaleExtent и панорамирование с помощью zoom.translateExtent.

Поведение масштабирования можно комбинировать с другими поведением, такими как d3-drag для перетаскивания и d3-brush для фокуса + контекста.

Поведение масштабирования можно программно контролировать с помощью zoom.transform, позволяя вам реализовывать элементы управления пользовательским интерфейсом, которые управляют отображением или подготавливают анимированные туры по данным. Плавные переходы при масштабировании основаны на статье “Плавное и эффективное масштабирование и панорамирование” Джерка Дж. ван Вайка и Вима А.А. Нуйя.

См. также d3-tile для примеров панорамирования и масштабирования карт.

Установка

Если вы используете npm, npm install d3-zoom. Вы также можете загрузить последнюю версию на GitHub. Для обычного HTML в современных браузерах импортируйте d3-zoom из Skypack:

<script type="module">

import {zoom} from "https://cdn.skypack.dev/d3-zoom@3";

const handler = zoom();

</script>

Для устаревших сред вы можете загрузить UMD-пакет d3-zoom с CDN на основе npm, такого как jsDelivr; экспортируется глобальная переменная d3:

<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-dispatch@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-ease@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-selection@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-timer@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-transition@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-drag@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-zoom@3"></script>
<script>

const zoom = d3.zoom();

</script>

Попробуйте d3-zoom в вашем браузере.

Справочник API

В этой таблице описано, как поведение масштабирования интерпретирует события:

Распространение всех потребленных событий немедленно останавливается.

¹ Необходимо для захвата событий вне iframe; см. d3-drag#9.
² Применяется только во время активного жеста с использованием мыши; см. d3-drag#9.
³ Применяется только сразу после некоторых жестов с использованием мыши; см. zoom.clickDistance.
⁴ Необходимо для эмуляции кликов при сенсорном вводе; см. d3-drag#9.
⁵ Игнорируется, если прошло менее 500 мс с момента завершения жеста с использованием сенсорного ввода; предполагает эмуляцию кликов.
⁶ Двойной щелчок и двойной тап запускают переход, который отправляет события начала, масштабирования и окончания; см. zoom.tapDistance..
⁷ Первое событие колеса вызывает событие начала; событие окончания генерируется, когда события колеса не поступают в течение 150 мс.
⁸ Игнорируется, если уже достигнут соответствующий предел диапазона масштаба.

d3.zoom() · Исходный код, Примеры

Создает новое поведение масштабирования. Возвращаемое поведение, zoom, является как объектом, так и функцией и обычно применяется к выбранным элементам через selection.call.

zoom(selection) · Исходный код, Примеры

Применяет это поведение масштабирования к указанной выборке, привязывая необходимые обработчики событий для панорамирования и масштабирования и инициализируя трансформацию масштабирования для каждого выбранного элемента к идентичной трансформации, если она еще не определена. Эта функция обычно не вызывается напрямую, а вызывается через selection.call. Например, чтобы инициализировать поведение масштабирования и применить его к выборке:

selection.call(d3.zoom().on("zoom", zoomed));

Внутри поведение масштабирования использует selection.on для привязки необходимых обработчиков событий для масштабирования. Обработчики используют имя .zoom, поэтому вы можете впоследствии отвязать поведение масштабирования следующим образом:

selection.on(".zoom", null);

Чтобы отключить только масштабирование с помощью колеса мыши (например, чтобы не мешать стандартной прокрутке), вы можете удалить обработчик событий колеса поведения масштабирования после применения поведения масштабирования к выборке:

selection
    .call(zoom)
    .on("wheel.zoom", null);

В качестве альтернативы используйте zoom.filter для большего контроля над событиями, которые могут инициировать жесты масштабирования.

Применение поведения масштабирования также устанавливает стиль -webkit-tap-highlight-color в прозрачный, отключая выделение при нажатии на iOS. Если вам нужен другой цвет выделения при нажатии, удалите или повторно примените этот стиль после применения поведения перетаскивания.

zoom.transform(selection, transform[, point]) · Исходный код, Примеры

Если selection — это выборка, устанавливает текущую трансфрмацию масштабирования выбранных элементов на указанную transform, мгновенно отправляя события начала, масштабирования и окончания событий. Если selection — это переход, определяет «tween» масштабирования к указанной transform с использованием d3.interpolateZoom, отправляя событие начала при старте перехода, события масштабирования для каждой итерации перехода и затем событие окончания при завершении перехода (или прерывании). Переход попытается свести к минимуму визуальное перемещение вокруг указанной point; если point не указан, он по умолчанию устанавливается в центр области просмотра области. transform может быть задан либо как трансформация масштабирования, либо как функция, возвращающая трансфрмацию масштабирования; аналогично, point может быть задан либо как массив из двух элементов [x, y], либо как функция, возвращающая такой массив. Если функция, она вызывается для каждого выбранного элемента, получая текущее событие (event) и данные d, с контекстом this в качестве текущего элемента DOM.

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

selection.call(zoom.transform, d3.zoomIdentity);

Чтобы плавно сбросить трансфрмацию масштабирования до идентичной трансформации за 750 миллисекунд:

selection.transition().duration(750).call(zoom.transform, d3.zoomIdentity);

Этот метод требует, чтобы вы полностью указали новую трансфрмацию масштабирования и не применяет заданный диапазон масштаба и диапазон перемещения, если таковой есть. Чтобы получить новую трансфрмацию из существующей трансфрмации и применить диапазоны масштаба и перемещения, см. вспомогательные методы zoom.translateBy, zoom.scaleBy и zoom.scaleTo.

zoom.translateBy(selection, x, y) · Исходный код

Если selection — это выбор, перемещает текущее масштабирование выбранных элементов на x и y, так что новое t_x1 = t_x0 + kx и t_y1 = t_y0 + ky. Если selection — это переход, определяет «масштабирование» анимации, перемещающей текущее преобразование. Этот метод — удобный метод для zoom.transform. Значения смещения x и y могут быть заданы либо как числа, либо как функции, возвращающие числа. Если это функция, она вызывается для каждого выбранного элемента, получая текущие данные d и индекс i, а также this контекст как текущий элемент DOM.

zoom.translateTo(selection, x, y[, p]) · Source

Если selection — это выбор, перемещает текущее масштабирование выбранных элементов таким образом, что заданная позиция ⟨x,y⟩ появляется в заданной точке p. Новое t_x = p_x - kx и t_y = p_y - ky. Если p не указан, он по умолчанию устанавливается в центр области просмотра extent. Если selection — это переход, определяет «масштабирование» анимации, перемещающей текущее преобразование. Этот метод — удобный метод для zoom.transform. Координаты x и y могут быть заданы либо как числа, либо как функции, возвращающие числа; аналогично точка p может быть задана либо как массив из двух элементов [p_x,p_y], либо как функция. Если это функция, она вызывается для каждого выбранного элемента, получая текущие данные d и индекс i, а также this контекст как текущий элемент DOM.

zoom.scaleBy(selection, k[, p]) · Source

Если selection — это выбор, масштабирует текущее масштабирование выбранных элементов на k, так что новое k₁ = k₀k. Точка отсчёта p не перемещается. Если p не указан, он по умолчанию устанавливается в центр области просмотра extent. Если selection — это переход, определяет «масштабирование» анимации, перемещающей текущее преобразование. Этот метод — удобный метод для zoom.transform. Множитель масштаба k может быть задан либо как число, либо как функция, возвращающая число; аналогично точка p может быть задана либо как массив из двух элементов [p_x,p_y], либо как функция. Если это функция, она вызывается для каждого выбранного элемента, получая текущие данные d и индекс i, а также this контекст как текущий элемент DOM.

zoom.scaleTo(selection, k[, p]) · Source

Если selection — это выбор, масштабирует текущее масштабирование выбранных элементов до k, так что новое k₁ = k. Точка отсчёта p не перемещается. Если p не указан, он по умолчанию устанавливается в центр области просмотра extent. Если selection — это переход, определяет «масштабирование» анимации, перемещающей текущее преобразование. Этот метод — удобный метод для zoom.transform. Множитель масштаба k может быть задан либо как число, либо как функция, возвращающая число; аналогично точка p может быть задана либо как массив из двух элементов [p_x,p_y], либо как функция. Если это функция, она вызывается для каждого выбранного элемента, получая текущие данные d и индекс i, а также this контекст как текущий элемент DOM.

zoom.constrain([constrain]) · Source

Если constrain указан, устанавливает функцию ограничения преобразования на указанную функцию и возвращает поведение масштабирования. Если constrain не указан, возвращает текущую функцию ограничения, которая по умолчанию:

function constrain(transform, extent, translateExtent) {
  var dx0 = transform.invertX(extent[0][0]) - translateExtent[0][0],
      dx1 = transform.invertX(extent[1][0]) - translateExtent[1][0],
      dy0 = transform.invertY(extent[0][1]) - translateExtent[0][1],
      dy1 = transform.invertY(extent[1][1]) - translateExtent[1][1];
  return transform.translate(
    dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1),
    dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1)
  );
}

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

zoom.filter([filter]) · Source

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

function filter(event) {
  return (!event.ctrlKey || event.type === 'wheel') && !event.button;
}

Фильтру передаётся текущее событие (event) и данные d, а также this контекст как текущий элемент DOM. Если фильтр возвращает ложное значение, инициирующее событие игнорируется, и никакие жесты масштабирования не начинаются. Таким образом, фильтр определяет, какие события ввода игнорируются. Фильтр по умолчанию игнорирует события mousedown на вторичных кнопках, так как эти кнопки обычно предназначены для других целей, таких как контекстное меню.

zoom.touchable([touchable]) · Source

Если touchable указан, устанавливает детектор поддержки касаний на указанную функцию и возвращает поведение масштабирования. Если touchable не указан, возвращает текущий детектор поддержки касаний, который по умолчанию:

function touchable() {
  return navigator.maxTouchPoints || ("ontouchstart" in this);
}

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

zoom.wheelDelta([delta]) · Source

Если delta указан, устанавливает функцию изменения колеса на указанную функцию и возвращает поведение масштабирования. Если delta не указан, возвращает текущую функцию изменения колеса, которая по умолчанию:

function wheelDelta(event) {
  return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002);
}

Значение Δ, возвращаемое функцией изменения колеса, определяет степень масштабирования в ответ на WheelEvent. Множитель масштаба transform.k умножается на 2^Δ; например, Δ = +1 удваивает множитель масштаба, Δ = -1 делит множитель масштаба пополам.

zoom.extent([extent]) · Source

Если extent указан, устанавливает область просмотра на указанный массив точек [[x0, y0], [x1, y1]], где [x0, y0] — верхний левый угол области просмотра, а [x1, y1] — нижний правый угол области просмотра, и возвращает это поведение масштабирования. Область extent также может быть задана как функция, возвращающая такой массив; если это функция, она вызывается для каждого выбранного элемента, получая текущие данные d, а также this контекст как текущий элемент DOM.

Если extent не указан, возвращает текущую функцию получения области, которая по умолчанию равна [[0, 0], [ширина, высота]], где ширина — ширина клиента элемента, а высота — его высота клиента; для элементов SVG используется ближайший родительский элемент SVG, или атрибуты width и height. В качестве альтернативы рассмотрите использование element.getBoundingClientRect.

Область просмотра влияет на несколько функций: центр области просмотра остаётся неизменным во время изменений с помощью zoom.scaleBy и zoom.scaleTo; центр и размеры области просмотра влияют на выбранный путь d3.interpolateZoom; и область просмотра необходима для применения необязательной области смещения.

zoom.scaleExtent([extent]) · Source

Если extent указан, устанавливает область масштаба на указанный массив чисел [k0, k1], где k0 — минимальный разрешённый множитель масштаба, а k1 — максимальный разрешённый множитель масштаба, и возвращает это поведение масштабирования. Если extent не указан, возвращает текущую область масштаба, которая по умолчанию равна [0, ∞]. Область масштаба ограничивает масштабирование. Она применяется при взаимодействии и при использовании zoom.scaleBy, zoom.scaleTo и zoom.translateBy; однако она не применяется при использовании zoom.transform для явного задания преобразования.

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

selection
    .call(zoom)
    .on("wheel", event => event.preventDefault());

zoom.translateExtent([extent]) · Source

Если параметр extent указан, устанавливает область масштабирования на указанный массив точек [[x0, y0], [x1, y1]], где [x0, y0] — верхний левый угол мира, а [x1, y1] — нижний правый угол мира, и возвращает это поведение масштабирования. Если extent не указан, возвращает текущую область масштабирования, которая по умолчанию равна [[-∞, -∞], [+∞, +∞]]. Область масштабирования ограничивает масштабирование, и может вызвать смещение при уменьшении масштаба. Она применяется при взаимодействии и при использовании zoom.scaleBy, zoom.scaleTo и zoom.translateBy; однако, она не применяется при использовании zoom.transform для явного задания преобразования.

zoom.clickDistance([distance]) · Source

Если параметр distance указан, устанавливает максимальное расстояние, на которое может переместиться мышь между событиями mousedown и mouseup, чтобы вызвать последующее событие клика. Если в какой-либо момент между событиями mousedown и mouseup мышь находится на расстоянии, равном или большем distance от своей позиции в момент mousedown, событие клика, следующего за mouseup, будет подавлено. Если distance не указан, возвращает текущее пороговое значение расстояния, которое по умолчанию равно нулю. Расстояние измеряется в координатах клиента (event.clientX и event.clientY).

zoom.tapDistance([distance]) · Source

Если параметр distance указан, устанавливает максимальное расстояние, на которое может сместиться двукратное тап-жест между первым touchstart и вторым touchend, которое вызовет последующее событие двойного клика. Если distance не указан, возвращает текущее пороговое значение расстояния, которое по умолчанию равно 10. Расстояние измеряется в координатах клиента (event.clientX и event.clientY).

zoom.duration([duration]) · Source

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

Чтобы отключить переходы при двойном клике и двойном тапе, можно удалить обработчик событий dblclick поведения масштабирования после применения его к выбору:

selection
    .call(zoom)
    .on("dblclick.zoom", null);

zoom.interpolate([interpolate]) · Source

Если параметр interpolate указан, устанавливает фабрику интерполяции для переходов масштабирования на указанную функцию. Если interpolate не указан, возвращает текущую фабрику интерполяции, которая по умолчанию равна d3.interpolateZoom для реализации плавного масштабирования. Чтобы применить прямую интерполяцию между двумя представлениями, попробуйте использовать d3.interpolate вместо этого.

zoom.on(typenames[, listener]) · Source

Если listener указан, устанавливает обработчик событий для указанных typenames и возвращает поведение масштабирования. Если для того же типа и имени уже был зарегистрирован обработчик событий, существующий обработчик удаляется перед добавлением нового. Если listener равен null, удаляются текущие обработчики событий для указанных typenames, если таковые имеются. Если listener не указан, возвращает первый текущий обработчик событий, соответствующий указанным typenames, если таковой имеется. При срабатывании указанного события каждый listener будет вызван с теми же контекстом и аргументами, что и обработчики событий selection.on: текущее событие (event) и данные d, с контекстом this в качестве текущего DOM-элемента.

typenames — строка, содержащая один или несколько typename, разделенных пробелами. Каждый typename — это type, за которым необязательно следует точка (.) и name, например zoom.foo и zoom.bar; имя позволяет зарегистрировать несколько обработчиков для одного и того же type. type должен быть одним из следующих:

• start — после начала масштабирования (например, при mousedown).
• zoom — после изменения преобразования масштабирования (например, при mousemove).
• end — после окончания масштабирования (например, при mouseup).

См. dispatch.on для получения дополнительной информации.

События масштабирования

Когда вызывается обработчик событий масштабирования zoom event listener, он получает текущее событие масштабирования в качестве первого аргумента. Объект event предоставляет несколько полей:

• event.target — связанное поведение масштабирования zoom behavior.
• event.type — строка «start», «zoom» или «end»; см. zoom.on.
• event.transform — текущее преобразование масштабирования.
• event.sourceEvent — базовое событие ввода, такое как mousemove или touchmove.

Преобразования масштабирования

Поведение масштабирования хранит состояние масштабирования на элементе, к которому было применено поведение масштабирования, а не на самом поведении масштабирования. Это связано с тем, что поведение масштабирования может быть применено к множеству элементов одновременно, и каждый элемент может масштабироваться независимо. Состояние масштабирования может изменяться как при взаимодействии пользователя, так и программно с помощью zoom.transform.

Для получения состояния масштабирования используйте event.transform в текущем событии масштабирования внутри обработчика событий масштабирования (см. zoom.on) или используйте d3.zoomTransform для данного узла. Последний вариант особенно полезен для программирования изменения состояния масштабирования, например, для реализации кнопок масштабирования в увеличении и уменьшении.

d3.zoomTransform(node) · Source

Возвращает текущее преобразование для указанного node. Обратите внимание, что node обычно должен быть DOM-элементом, а не selection. (Выбор может состоять из нескольких узлов в разных состояниях, а эта функция возвращает только одно преобразование.) Если у вас есть выбор, сначала вызовите selection.node:

var transform = d3.zoomTransform(selection.node());

В контексте обработчика событий event listener node обычно является элементом, который получил событие ввода (который должен быть равен event.transform), this:

var transform = d3.zoomTransform(this);

Внутренне преобразование элемента хранится как element.__zoom; однако, вы должны использовать этот метод вместо прямого доступа к нему. Если у данного node нет определенного преобразования, возвращает преобразование ближайшего предка или, если такового нет, преобразование по умолчанию. Возвращаемое преобразование представляет собой двумерную матрицу преобразования в форме:

k 0 t_x
0 k t_y
0 0 1

(Эта матрица способна представлять только масштабирование и смещение; будущая версия может также поддерживать поворот, хотя это, вероятно, не будет обратной совместимостью.) Позиция ⟨x,y⟩ преобразуется в ⟨xk + t_x,yk + t_y⟩. Объект преобразования предоставляет следующие свойства:

• transform.x — величина смещения t_x по оси x.
• transform.y — величина смещения t_y по оси y.
• transform.k — коэффициент масштабирования k.

Эти свойства следует рассматривать как только для чтения; вместо изменения преобразования используйте transform.scale и transform.translate для вывода нового преобразования. Также см. zoom.scaleBy, zoom.scaleTo и zoom.translateBy для удобных методов поведения масштабирования. Чтобы создать преобразование с заданными k, t_x и t_y:

var t = d3.zoomIdentity.translate(x, y).scale(k);

Чтобы применить преобразование к контексту 2D Canvas, используйте context.translate, за которым следует context.scale:

context.translate(transform.x, transform.y);
context.scale(transform.k, transform.k);

Аналогично, для применения преобразования к HTML-элементам с помощью CSS:

div.style("transform", "translate(" + transform.x + "px," + transform.y + "px) scale(" + transform.k + ")");
div.style("transform-origin", "0 0");

Для применения преобразования к SVG:

g.attr("transform", "translate(" + transform.x + "," + transform.y + ") scale(" + transform.k + ")");

Или проще, используя transform.toString:

g.attr("transform", transform);

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

transform.scale(k) · Source

Возвращает преобразование, масштаб k₁ которого равен k₀k, где k₀ — масштаб этого преобразования.

transform.translate(x, y) · Source

Возвращает преобразование, где сдвиги t_x1 и t_y1 равны t_x0 + t_k x и t_y0 + t_k y, где t_x0 и t_y0 — сдвиги этого преобразования, а t_k — масштаб этого преобразования.

transform.apply(point) · Source

Возвращает преобразованную точку, которая представляет собой массив из двух чисел [x, y]. Полученная точка равна [xk + t_x, yk + t_y].

transform.applyX(x) · Source

Возвращает преобразованную x-координату, xk + t_x.

transform.applyY(y) · Source

Возвращает преобразованную y-координату, yk + t_y.

transform.invert(point) · Source

Возвращает обратное преобразование указанной точки, которая представляет собой массив из двух чисел [x, y]. Полученная точка равна [(x - t_x) / k, (y - t_y) / k].

transform.invertX(x) · Source

Возвращает обратное преобразование указанной x-координаты, (x - t_x) / k.

transform.invertY(y) · Source

Возвращает обратное преобразование указанной y-координаты, (y - t_y) / k.

transform.rescaleX(x) · Source

Возвращает копию непрерывной шкалы x, чья область значений преобразуется. Это реализуется путём применения обратного x-преобразования к области значений шкалы, а затем применения обратной шкалы для вычисления соответствующей области значений:

function rescaleX(x) {
  var range = x.range().map(transform.invertX, transform),
      domain = range.map(x.invert, x);
  return x.copy().domain(domain);
}

Шкала x должна использовать d3.interpolateNumber; не используйте continuous.rangeRound, так как это снижает точность continuous.invert и может привести к неточному преобразованному диапазону. Данный метод не изменяет входную шкалу x; таким образом, x представляет собой не преобразованную шкалу, а возвращаемая шкала — её преобразованный вид.

transform.rescaleY(y) · Source

Возвращает копию непрерывной шкалы y, чья область значений преобразуется. Это реализуется путём применения обратного y-преобразования к области значений шкалы, а затем применения обратной шкалы для вычисления соответствующей области значений:

function rescaleY(y) {
  var range = y.range().map(transform.invertY, transform),
      domain = range.map(y.invert, y);
  return y.copy().domain(domain);
}

Шкала y должна использовать d3.interpolateNumber; не используйте continuous.rangeRound, так как это снижает точность continuous.invert и может привести к неточному преобразованному диапазону. Данный метод не изменяет входную шкалу y; таким образом, y представляет собой не преобразованную шкалу, а возвращаемая шкала — её преобразованный вид.

new d3.ZoomTransform(k, x, y) · Source

Возвращает преобразование со масштабом k и сдвигом (x, y).

transform.toString() · Source

Возвращает строку, представляющую SVG-преобразование, соответствующее этому преобразованию. Реализовано как:

function toString() {
  return "translate(" + this.x + "," + this.y + ") scale(" + this.k + ")";
}

d3.zoomIdentity · Source

Преобразование по умолчанию, где k = 1, t_x = t_y = 0.