Зажимать масштабирование / трансформировать колесо с помощью d3 - PullRequest
Новая
       24

Зажимать масштабирование / трансформировать колесо с помощью d3

0 голосов
/ 31 января 2020

Я бы подумал, что об этом бы спросили раньше, но, похоже, не могу его найти.

Я работаю над svg-компонентом, использующим d3, для которого требуется механизм вертикальной прокрутки, который переводит элементы внутри SVG. Создание перетаскиваемой полосы прокрутки, которая работает как браузерная, оказалась довольно простой, но теперь я сталкиваюсь с проблемой, пытающейся интегрировать события сенсорной панели / колеса мыши.

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

Вот упрощенный пример: 

<svg height="300px" width="200px">
  <rect id="im-gonna-move" height="100%" width="100%">
</svg>
<script>
  const minTranslate = -100;
  const maxTranslate = 100;

  d3.select('svg').call(
    d3.zoom()
      .on('zoom', function(){
        if(d3.event.transform.y > minTranslate && d3.event.transform.y < maxTranslate){
          scrollable.select('rect').attr('transform', `translate(0,${d3.event.transform.y})`)
        }
      })
  );
</script>

Вот минимальная скрипка для иллюстрации, а также:

https://jsfiddle.net/indiaTango/fkcwz8yg/

Я думал, что ответ будет быть d3's translateExtent, но мне не повезло - это кажется довольно распространенной проблемой, так что надеемся, что есть простое решение

...