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. В противном случае, загрузите последнюю версию. Вы также можете загрузить напрямую с d3js.org, как автономную библиотеку или как часть D3. Поддерживаются среды AMD, CommonJS и vanilla. В vanilla экспортируется глобальная переменная d3:

<script src="https://d3js.org/d3-color.v2.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v2.min.js"></script>
<script src="https://d3js.org/d3-ease.v2.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v2.min.js"></script>
<script src="https://d3js.org/d3-selection.v2.min.js"></script>
<script src="https://d3js.org/d3-timer.v2.min.js"></script>
<script src="https://d3js.org/d3-transition.v2.min.js"></script>
<script src="https://d3js.org/d3-drag.v2.min.js"></script>
<script src="https://d3js.org/d3-zoom.v2.min.js"></script>
<script>

var 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 — это переход, определяет «масштабирование» анимацию до указанного 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]) · Источник

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

zoom.scaleBy(selection, k[, p]) · Исходный код

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

zoom.scaleTo(selection, k[, p]) · Исходный код

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

zoom.constrain([constrain]) · Исходный код

Если 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]) · Исходный код

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

function filter(event) {
  return !event.ctrlKey && !event.button;
}

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

zoom.touchable([touchable]) · Исходный код

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

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

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

zoom.wheelDelta([delta]) · Исходный код

Если 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]) · Исходный код

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

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

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

zoom.scaleExtent([extent]) · Исходный код

Если 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]) · Исходный код

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

zoom.clickDistance([distance]) · Исходный код

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

zoom.tapDistance([distance]) · Source

Если distance задано, устанавливает максимальное расстояние, на которое может перемещаться двойное нажатие (жест с двойным касанием) между первым touchstart и вторым touchend, что вызовет последующее событие двойного щелчка (double-click). Если 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 — текущее преобразование масштабирования zoom transform.
• event.sourceEvent — основное событие ввода, например mousemove или touchmove.

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

Поведение масштабирования хранит состояние масштабирования в элементе, к которому было применено поведение масштабирования applied, а не в самом поведении масштабирования. Это связано с тем, что поведение масштабирования может быть применено к множеству элементов одновременно, и каждый элемент может быть масштабирован независимо. Состояние масштабирования может изменяться как при взаимодействии пользователя, так и программно с помощью 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, таким образом, представляет собой шкалу без преобразования, а возвращаемая шкала представляет её преобразованный вид.

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.