Wie pan für d3.behavior.zoom zu deaktivieren?

Question

Diese Frage sieht ähnlich aus wie this one, aber ich bin immer noch nicht in der Lage herauszufinden, ob es möglich ist, d3.behavior.zoom zu verwenden, aber ohne die Pan-Fähigkeit. Mit anderen Worten, ich möchte nur mit dem Rad rein-/rauszoomen.

Der Grund dafür ist, dass ich auf dem "zoombaren" Bereich putzen möchte.

Danke!

Answer 1

Sagen Sie bitte ein Zoom-Verhalten definiert haben:

var zoom = d3.behavior.zoom().on('zoom', update); 

Wenn Sie das Zoomverhalten auf eine Auswahl anwenden, können Sie den Ereignis-Listener deregistrieren, dass es intern verwendet, um bestimmte Wechselwirkungen zu erkennen und darauf zu reagieren. In Ihrem Fall möchten Sie etwa Folgendes tun:

selection.call(zoom) 
    .on("mousedown.zoom", null) 
    .on("touchstart.zoom", null) 
    .on("touchmove.zoom", null) 
    .on("touchend.zoom", null); 

Ich bin mir nicht sicher, ob Sie die Berührungsereignisse entfernen möchten. Sonst könnte das Zoomen mit Doppeltippen entfallen. Sie sollten mit denen experimentieren.

Answer 2

Ich denke, es wäre gut, die Problemumgehung zu teilen, die ich gefunden habe, um mit diesem Problem umzugehen. Was ich getan habe ist, den Hörer auf den Start der Bürste zu verwenden, um „zu deaktivieren“, um den Zoom:

zoom.on("zoom",null); 
selection.call(zoom); 

und aktivieren Sie es wieder auf dem brushend Ereignis.

Es gibt einen weiteren Trick zu berücksichtigen und kommt von der Tatsache, dass es wichtig ist, den Skala und Übergang Werte der letzten gültigen Zoom Interaktion zu speichern, so dass Sie diese Werte verwenden, wenn die Bürste zu aktivieren auf dem brushend Ereignisse wie diese

zoom.scale(lastEventScale).translate(lastEventTranslate).on("zoom",drawZoom); 
selection.call(scatterZoom); 

würde ich höre andere mehr „elegant“ Lösungen für dieses Problem lieben.

Answer 3

Eine Lösung, die ich gefunden habe, war, ein Rect-Element vor das Zoom-aktivierte Element zu stecken (sie müssen Geschwister sein) und seine Füllung auf "transparent" setzen, wenn ich die Zoom-Interaktion deaktivieren wollte oder "keine" , als ich die Zoom-Interaktion aktivieren wollte. Es sah so etwas wie dieses:

if (chart._disableZoom) { 
    var rootPanel = d3.select('.rootPanel'); // this is the parent of the element that can be zoomed and panned 
    if (!rootPanel.select('.stopEventPanel').node()) { // create panel if it doesn't exist yet 
     //.stopEventPanel is appended next to the zoom-enabled element 
     rootPanel.append('rect').attr('class', 'stopEventPanel').attr('width', renderConfig.width).attr('height', renderConfig.height).attr('fill', 'transparent'); 
    } else { // disable zoom and pan 
     rootPanel.select('.stopEventPanel').attr('fill', 'transparent'); 
    } 
} else { // enable zoom and pan 
    d3.select('.rootPanel').select('.stopEventPanel').attr('fill', 'none'); 
}