d3.js масштабирование распространения в v4: масштабирование масштаба, когда один палец находится над дочерним элементом

1

У меня есть интерактивная карта с интересными местами, представленными как круги SVG. Каждый круг имеет событие touchstart или mousedown, а прозрачный прямоугольник позади связан с d3.zoom(), поэтому вы можете увеличить масштаб карты! Здесь настройка, если вы должны были проверить элементы:

<div id="map">
    <svg>
        <g><rect></rect></g> <!-- transparent rect bound to d3.zoom() -->
        <g>
            <circle></circle> <!-- places of interest with touchstart listeners -->
            <circle></circle>
            ...
        </g>
    </svg>
</div>

Теперь, если я зажимаю зум, и один из моих толстых пальцев окажется в одном из этих кругов, зум будет вести себя странно на моем телефоне, если я не допущу, чтобы зум появлялся всякий раз, когда круг касался так:

  selection.append("circle").on("touchstart mousedown",function(d,i){
       d3.event.preventDefault(); // no zoom for you
       // ... code to highlight circle or whatever 
  }

Таким образом, если пользователь случайно масштабируется одним пальцем по кругу или месту интереса, кружок выделяется, а зум отменяется. Чтение этой дискуссии, а также выпуск 66 из того же обсуждения помогли мне хорошо настроить это.

Таким образом, масштабирование работает, если пользователь избегает интересных мест при масштабировании.

Тем не менее, мне бы очень хотелось, чтобы это было настроено по-другому и всегда нужно иметь приоритет.

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

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

Однажды, возможно, я получу интуитивное понимание сенсорных событий, но пока я смиренно спрашиваю, как подойти к этому, поскольку я теряюсь. Любые предложения о том, как определить приоритет масштабирования для touchstart для моей карты, будут очень признательны. Спасибо за чтение.

Теги:
d3.js
touch

1 ответ

0
Лучший ответ

Таким образом, это принесло мне мой значок перелива. Я решил это решить, создав все круги, используя холст. Карта svg с масштабированием d3, но с кругами холста. Если у вас есть элемент d3, и вы поместите один палец на элемент, а другой на карту и попытаетесь зажать масштаб, это не сработает. Использование canvas и отслеживания указателей решает это.

Это готовая карта и проект https://pixelsandplans.com/live/flow/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню