web-dev-qa-db-fra.com

Comment désactiver le zoom double clic pour d3.behavior.zoom?

Je ne veux pas d3.behavior.zoom pour ajouter la possibilité de double-cliquer sur le zoom sur mon graphique. Comment puis-je désactiver ce comportement?

Voici un JSFiddle avec le comportement indésirable.

J'ai essayé ce qui suit sans aucune chance.

 d3.behavior.zoom.dblclick = function() {};
javascriptd3.js
43
Brant Olsen

Vous pouvez désactiver le comportement de double-clic en supprimant l'écouteur d'événements dblclick du comportement de zoom. En regardant votre code, vous avez attribué le comportement de zoom à l'élément SVG. Vous pourriez donc dire:

d3.select("svg").on("dblclick.zoom", null);

Ou, avec l'endroit où vous enregistrez le comportement de zoom:

.call(d3.behavior.zoom().on("zoom", update)).on("dblclick.zoom", null)

Vous pouvez également vouloir déplacer le comportement de zoom vers le bas à un élément G plutôt que de le placer sur l'élément SVG racine; Je ne suis pas sûr que cela fonctionnera correctement sur le SVG racine, car l'élément SVG ne prend pas en charge attribut de transformation .

98
mbostock

Il est facile de configurer une fonction proxy. Stockez l'événement par défaut (cible), puis enregistrez un événement proxy à la place. Le proxy activera/désactivera ensuite l'événement cible en utilisant la logique dont vous avez besoin:

svg.call(zoom);
var dblclickTarget = svg.on("dblclick.zoom");
var mouseScrollTarget = svg.on("mousewheel.zoom");

function eventProxy(fn){
  return function(){
    // Enable events if enableEvents=== true
    if(enableEvents){
      fn.apply(this, arguments)
    }
  }
};

svg.on("wheel.zoom", eventProxy(dblclickTarget))
   .on("mousewheel.zoom", eventProxy(mouseScrollTarget));

En appliquant le modèle de proxy de cette manière, vous pouvez simplement modifier la variable "enableEvents" pour activer ou désactiver les événements.

4
AJ Hurst