Подтвердить что ты не робот

D3js: Как очистить масштаб масштабирования, установленный событием d3.zoom?

Я использую d3.behavior для присоединения события масштабирования к моему SVG, поэтому используется колесо мыши. Я могу получить событие масштабирования с переводом и масштабированием, которое затем использую для установки атрибута преобразования элемента.

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

Итак, где D3 хранит это значение и как это сделать reset?

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

4b9b3361

Ответ 1

Шкала масштабирования сохраняется в объекте масштабирования. Я предполагаю, что у вас есть строка кода, которая выглядит так:

var zoom = d3.behavior.zoom() 

Получение масштаба от этого объекта прост:

zoom.scale()

Чтобы уменьшить масштаб x2:

zoom.scale( zoom.scale()/2 )

Перевод работает одинаково, с zoom.translate() и zoom.translate( [x, y] ), чтобы получить и установить.

Чтобы преобразовать отображение в синхронизацию с увеличением, просто убедитесь, что при обновлении он обновляется.

Ответ 2

Там более простой способ в D3 v5. Вы можете вызвать selection.call(zoom.transform, d3.zoomIdentity); сбросить масштаб и даже применить плавный переход, такой как selection.transition().duration(750).call(zoom.transform, d3.zoomIdentity); ,

Источник: