d3 Zoom und Slider Problem zusammen

Question

Ich habe ein SVG-Diagramm, das perfekt mit d3 Zoom funktioniert. Die Anforderung bestand jedoch darin, den Schieberegler hinzuzufügen und das Zoomen mit dem Schieberegler sowie dem Mausrad zu steuern.

Das Problem, dem ich jetzt gegenüberstehe, ist, ich erzeuge ein Transformationsobjekt wie: Lassen Sie sliderScale = zoomIdentityManual.scale (newK); // newK ist die neue Skala basierend auf Slider ich es berechnen.

Es ist wieder in Ordnung. Aber wenn der Benutzer beginnt, mit der Maus direkt nach dem Schieberegler zu zoomen, springt das Diagramm umher. Und ich kann sehen warum. weil das Ereignis von der Maus vollständig getrennt arbeitet als das Transformationsobjekt, das ich manuell erzeuge.

Ich fand dieses Beispiel, (http://bl.ocks.org/bollwyvl/871b7c781b92fd0044f5) und der Hauptunterschied ist die Version von d3. Es ist v3 und ich benutze v4.

function slided(d) { zoom.scale(d3.select(this).property("value")) .event(svg); }

sieht aus wie es .event(svg) tut und das ist, wo das aktuelle Ereignis Änderung macht: wie Sie in der slided Funktion sehen. Aber Version 4 hat keine solche Methode.

Alles in allem gibt es eine Methode, Schieberegler und d3 Zoom reibungslos zusammen zu arbeiten?

Answer 1

Mein Problem war, dass ich nicht richtig zoomen konnte, wenn sich der Slider bewegte. Ich rufe die Funktion direkt, aber ich brauchte die Zoom-Aktion auf dem svg zu tun nennen wie:

svg.select(".zoom").call(zoom.transform, d3.zoomIdentity 
     .scale(width/(s[1] - s[0])) 
     .translate(-s[0], 0)); 

zoom.transform war der Trick