d3.js zoom propagation in v4: pinch Zoomen einer Karte, wenn ein Finger über einem Kind Element ist

Question

Ich habe eine interaktive Karte mit Orten von Interesse als SVG-Kreise dargestellt. Jeder Kreis hat ein Touchstart- oder Mousedown-Ereignis und das transparente Rechteck dahinter ist an d3.zoom() gebunden, sodass Sie die Karte vergrößern können! Hier ist die einrichten, wenn Sie die Elemente kontrollieren sind:

<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> 

Nun, wenn ich zoom kneifen, und einer meiner dicken Finger geschieht auf einem dieser Kreise zu sein, wird der Zoom seltsam auf meinem Handy verhalten, wenn ich verhindern, dass der Zoom auftritt, wenn ein Kreis wie so berührt wird:

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

diese Weise, wenn der Benutzer versehentlich mit einem Finger auf einem Kreis oder Sehenswürdigkeit zoomt, sind die Kreis-Highlights und der Zoom abgebrochen. Lesen this Diskussion und auch issue 66 aus der gleichen Diskussion hat mich schön bei der Einrichtung dieser geholfen.

So Zoom funktioniert, vorausgesetzt der Benutzer vermeidet Orte von Interesse beim Zoomen.

Aber, was ich wirklich gerne tun würde, ist dies anders herum eingerichtet und haben den Zoom immer erste Priorität zu nehmen.

Ich habe versucht, die Kreise hinter dem Zoom-Rechteck zu platzieren, aber natürlich erhalten die Kreise keine Berührungsereignisse mehr. Das ist bedauerlich, weil die Karte perfekt zoomt, wenn Sie nicht mehr mit den interessanten Orten interagieren können.

Ich komme im Moment vorbei, indem ich die Orte von Interesse kleiner mache, als ich möchte, damit ich die Chancen erhöhen kann, dass der Benutzer nur auf der Karte zoomt. Dies ist natürlich nicht optimal.

Eines Tages werde ich vielleicht ein intuitives Verständnis von Berührungsereignissen erlangen, aber jetzt frage ich demütig, wie ich mich dem nähern sollte, da ich mich verlaufe. Irgendwelche Vorschläge, wie man den Zoomstart über Touchstart für meine Karte priorisieren kann, würde sehr geschätzt werden. Danke fürs Lesen.

Answer 1

So bekam ich mein Tumbleweed-Abzeichen. Ich habe das gelöst, indem ich alle Kreise mit Canvas erstellte. Eine Svg-Map mit d3-Zoom, aber mit Canvas-Kreisen. Wenn Sie ein d3-Element haben und einen Finger auf das Element und den anderen auf der Karte platzieren und versuchen, den Zoom zu zie- hen, funktioniert das nicht. Die Verwendung von Canvas und Pointer Tracking löst dies.

Dies ist die fertige Karte und das Projekt https://pixelsandplans.com/live/flow/