D3 Mausrad Zoom-Richtung

Question

Ich versuche, einige benutzerdefinierte Zoom-Funktionalität in d3.js zu erstellen. Momentan wird der Zoom mit einem einzigen Klick ausgelöst und zoomt, um nur auf den angeklickten Bereich zu fokussieren.

Derzeit hat mein Code eine function zoom(d), die genau das tut, was sie benötigt. Es gibt auch eine var zoomTransition, die sich innerhalb von zoom() befindet und für einen Großteil der Funktionalität verantwortlich ist. Ich kann leider nicht viel von meinem Code teilen.

Der Zoom muss auch bei einem Maus-Scroll erfolgen. Die Schwierigkeit, die ich habe ist, dass dies:

 .on("wheel", function(d){ 
      zoom(d); 
     }); 

ignoriert die Bildlaufrad Richtung. Zoom wird einfach aufgerufen, weil das Rad gescrollt wird, entweder rein oder raus.

Gibt es eine Möglichkeit, die Scroll-Richtung zugreifen und in Zoom() übergeben? Oder ein besserer Weg, dies zu tun?

Answer 1

wurde für diese Suche:

.on("wheel", function(d){ 
      var direction = d3.event.wheelDelta < 0 ? 'down' : 'up'; 
      zoom(direction === 'up' ? d : d.parent); 
     }); 

Mehr so ​​Javascript als d3, aber das ist, wie Sie den Zugriff auf Bildlaufrad-Information.

Answer 2

d3 hat ein Zoom-Verhalten, das Sie möglicherweise nützlich finden.

Beispielcode:

var zoom = d3.behavior.zoom() 
     .scaleExtent([0, 10]) 
     .on("zoom", redraw); //if you are sure that your zoom function is working just replace redraw with your zoom function 


function redraw() { 
    return svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); 
} 

Voll Beispiel:

http://bl.ocks.org/mbostock/2206340