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

Справочник API ▸ Поведения ▸ Поведение масштабирования

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

d3.behavior.zoom()

Создаёт новое поведение масштабирования. После создания вы можете применить это поведение к выбранным элементам, используя selection.call:

var zoom = d3.behavior.zoom();
selection.call(zoom);

Все зарегистрированные обработчики используют пространство имён «zoom», поэтому для последующего удаления поведения:

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

zoom(selection)

Применяет поведение масштабирования к указанному selection, регистрируя необходимые обработчики событий для поддержки перемещения и масштабирования.

zoom.translate([translate])

Устанавливает текущий вектор смещения масштабирования. Если не указано, возвращает текущий вектор смещения, который по умолчанию равен [0, 0].

zoom.scale([scale])

Устанавливает текущий масштаб. Если не указано, возвращает текущий масштаб, который по умолчанию равен 1.

zoom.scaleExtent([extent])

Устанавливает допустимый диапазон масштаба как массив из двух элементов, [минимальное значение, максимальное значение]. Если не указано, возвращает текущий диапазон масштаба, который по умолчанию равен [0, Infinity].

zoom.center([center])

Если center указан, устанавливает точку фокусировки [x, y] для масштабирования колёсиком мыши и возвращает это поведение масштабирования. Если center не указан, возвращает текущую точку фокусировки, которая по умолчанию равна null. Значение null указывает, что масштабирование колёсиком мыши должно происходить вокруг текущего положения курсора.

zoom.size([size])

Если size указан, устанавливает размер области просмотра до указанных размеров [ширина, высота] и возвращает это поведение масштабирования. Если size не указан, возвращает текущий размер области просмотра, который по умолчанию равен [960, 500]. size необходим для поддержки плавного масштабирования во время анимаций.

zoom.x([x])

Устанавливает x-шкалу, область значений которой должна автоматически корректироваться при масштабировании. Если не указано, возвращает текущую x-шкалу, которая по умолчанию равна null. Если область значений или диапазон шкалы изменены программно, необходимо вызвать эту функцию снова. Установка x-шкалы также сбрасывает масштаб до 1 и смещение до [0, 0].

zoom.y([y])

Устанавливает y-шкалу, область значений которой должна автоматически корректироваться при масштабировании. Если не указано, возвращает текущую y-шкалу, которая по умолчанию равна null. Если область значений или диапазон шкалы изменены программно, необходимо вызвать эту функцию снова. Установка y-шкалы также сбрасывает масштаб до 1 и смещение до [0, 0].

zoom.on(type, listener)

Регистрирует указанный listener для получения событий указанного type от поведения масштабирования. Поддерживаются следующие типы:

• zoomstart - в начале жеста масштабирования (например, touchstart).
• zoom - при изменении вида (например, touchmove).
• zoomend - в конце текущего жеста масштабирования (например, touchend).

Если обработчик событий уже был зарегистрирован для того же типа, существующий обработчик удаляется перед добавлением нового. Для регистрации нескольких обработчиков событий для одного и того же типа события, тип может быть последован необязательным пространством имён, таким как «zoom.foo» и «zoom.bar». Для удаления обработчика, передайте null в качестве обработчика.

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

При срабатывании объекта d3.event будет содержать следующие свойства:

• scale - число; текущий масштаб.
• translate - массив из двух элементов, представляющий текущий вектор смещения.

zoom.event(selection)

Если selection — это выборка элементов, немедленно отправляет жест масштабирования зарегистрированным обработчикам, как последовательность из трёх событий: zoomstart, zoom и zoomend. Это может быть полезно для вызова обработчиков после программной установки значений translate или scale. Если selection — это анимация, регистрируются соответствующие интерполяции, чтобы поведение масштабирования отправляло события в течение анимации: событие zoomstart при начале анимации от ранее установленного вида, события zoom на каждой итерации анимации и, наконец, событие zoomend при завершении анимации. Обратите внимание, что анимация будет прервана, если пользователь начнёт масштабирование до завершения анимации.