D3 - Настройка масштаба двойного щелчка

Я огляделся и не нашел надежного решения для настройки масштаба масштабирования, когда пользователь дважды щелкает экран.

Самое большее, что я получил, это установить scaleVal, как показано в функции dblclicked(), показанной здесь в скрипке.

https://jsfiddle.net/helloGoodDay/62vq9h8p/3/

            function dblclicked()
            {
                var translate = zoom.translate(),
                    mouse = d3.mouse(this),
                    scaleOld = zoom.scale(),
                    zoomOld = Math.log(scaleOld) / Math.LN2,
                    zoomNew = d3.event.shiftKey ? Math.max(minScale + 8, Math.ceil(zoomOld) - 1) : Math.min(maxScale + 8, Math.floor(zoomOld) + 1),
                    scaleNew = Math.pow(scaleVal, zoomNew),
                    zoomDelta = scaleNew / scaleOld;

                 svg.transition()
                     .duration(350)
                     .call(zoom
                     .scale(scaleNew)
                     .translate([(translate[0] - mouse[0]) * zoomDelta + mouse[0], (translate[0] - mouse[0]) * zoomDelta + mouse[0]])
                     .event);

                 d3.event.stopImmediatePropagation();
            }

Однако, если вы дважды щелкните еще немного, узлы исчезнут, и мне также не нравится анимация.

Есть ли способ установить значение масштаба таким образом, чтобы узлы не исчезали и чтобы анимация не была такой суетливой?

Изменить: функция взята из https://github.com/d3/d3/issues/1985


javascript svg d3.js translate zooming
person helloGoodDay    schedule 22.08.2016    source источник
comment
Вы хотите установить максимальное значение масштабирования? Потому что, если вы только уменьшите масштаб масштабирования, это всегда будет совершенно бесконечное масштабирование.   -  person EA-Lille    schedule 22.08.2016
comment
Спасибо за ответ. В скрипке текущая степень масштабирования составляет от 1 до 1000. Так что да, я уже установил максимальное значение масштабирования.   -  person helloGoodDay    schedule 23.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, скажите мне, подходит ли это решение для вашей проблемы.

https://jsfiddle.net/qm6h4wm7/2/

Что я сделал :

  • уменьшать масштаб между каждым зумом (1)

  • ограничить масштаб до 5, чтобы узел всегда был в поле зрения (2)

таким образом, чтобы узлы не исчезали

(1) scaleNew = Math.pow(2, zoomNew)

(2) if(zoomNew<5){...}
person EA-Lille    schedule 23.08.2016
comment
Спасибо, что нашли время ответить на этот вопрос. Ваше текущее решение очень похоже на то, что я сделал, которое заключалось в том, чтобы ограничить масштабирование, а затем уменьшить масштаб, как только он достигнет максимального масштаба. Наши ответы были быстрым решением. Я думаю, я ищу решение, при котором, если вы увеличите масштаб, узлы не исчезнут, и если решение можно будет сделать без анимации. - person helloGoodDay; 24.08.2016
comment
Извините, я думаю, что не понимаю вас, когда вы говорите, что узлы не исчезнут. если вы заблокируете максимальный зум, они не исчезнут... нет? Для эффекта анимации кажется, что вы хотите вызвать эффект колеса прокрутки в событии двойного клика, нет? Вы пытались это сделать? - person EA-Lille; 25.08.2016
comment
Спасибо за ответ. Теперь я понимаю, почему пропадают узлы, это потому, что зум-зум прошел максимальный экстент. Вы правы для этого примера, он не исчезнет. Я не знаю, как убрать анимацию или изменить ее, чтобы сделать ее более плавной. В качестве быстрого исправления я увеличил продолжительность анимации. - person helloGoodDay; 25.08.2016