관심 장소가 svg 원으로 표시된 대화식지도가 있습니다. 각 원에는 터치 시작 또는 마우스 다운 이벤트가 있고 뒤에있는 투명 사각형은 d3.zoom()에 바인딩되어 있으므로지도를 확대 할 수 있습니다! 당신이 요소를 검사한다면 여기까지 설정되어 :v3의 d3.js 확대/축소 : 한 손가락이 자식 요소 위에있을 때지도를 손가락으로 확대/축소
<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
}
이 방법을, 사용자가 실수로 원 또는 관심의 장소에 한 손가락으로 확대하는 경우, 원의 하이라이트와 줌이 취소됩니다. 동일한 토론에서 this 토론을 읽으면서 issue 66도 멋지게 설정하는 데 도움이되었습니다.
확대/축소시 사용자가 관심 장소를 피할 수 있도록 줌 기능이 작동합니다.
하지만 실제로하고 싶은 것은 다른 방법으로 설정하고 줌을 항상 최우선으로 생각하는 것입니다.
나는 원을 확대/축소 사각형 뒤에 배치하려고 시도했지만 물론 원이 더 이상 터치 이벤트를받지 못합니다. 관심 장소와 더 이상 상호 작용할 수없는 경우지도가 완벽하게 확대되므로 이는 불행한 일입니다.
나는 관심 장소를 내가 원하는 것보다 작게 만들어서 사용자가지도 만 확대 할 수있는 기회를 늘릴 수 있습니다. 물론 이것은 차선책입니다.
언젠가 나는 언젠가는 터치 이벤트에 대한 직관적 인 이해를 얻게 될 것이지만, 지금 당장은 내가 길을 잃을 때 어떻게 접근해야하는지 겸손하게 묻습니다. 내지도에 대해 터치시 줌을 우선 적용하는 방법에 대한 제안 사항에 크게 감사드립니다. 읽어 주셔서 감사합니다.