À quelle fréquence l'événement de traînée D3 est-il déclenché?

Question

J'ai une question très générale de bas niveau sur le glisser. Je suis particulièrement intéressé par l'apprentissage de ce qui détermine exactement quand un événement glisser est déclenché dans D3.js v4. Par exemple, si je déplace très lentement un objet déplacé, un événement de déplacement déclenchera chaque pixel que je déplace. Cependant, si je me déplace assez rapidement, l'événement de déplacement n'est pas déclenché dans une corrélation un-à-un avec la quantité de pixels que j'ai déplacés.

Je suis actuellement à la recherche de ce problème, principalement avec l'onglet Performances de Chrome Dev; Je pense que cela va (espérons-le) me donner un aperçu. Je suis également conscient qu'il existe des fonctions anti-rebond qui peuvent limiter le nombre de fois qu'un événement est appelé; Cependant, je ne sais pas ou je vois que D3 a ceci. Je pense que la raison de la diminution des appels à faire glisser a quelque chose à voir avec quelque chose d'intérieur peut-être dans Chrome et qu'il utilise peut-être un algorithme pour appeler drag en fonction de la vitesse de déplacement de la souris. Cela semble être la réponse la plus probable, mais si quelqu'un peut me donner un aperçu de la façon dont ce comportement est déterminé, je serais très reconnaissant. Une dernière chose: je suis également conscient que parfois lorsque vous déplacez le curseur de la souris si rapidement qu'il «sort» de l'objet que vous faites glisser, l'événement de déplacement ne doit pas être appelé. Cependant, même si je ne «quitte» pas l'objet que je suis en train de faire glisser, il y a encore moins d'appels à faire glisser en fonction de la rapidité avec laquelle je déplace le curseur de la souris.

p.s. alors que j'utilise D3, ce problème peut très bien être lié au fait de glisser en général et ne pas être spécifique à D3 ...

Answer 1

Le problème que vous voyez a peu à voir avec le D3, c'est un JavaScript général comportement ou, mieux encore, un comportement lié au navigateur: ce que vous voyez est une caractéristique de mousemove.

Si vous regardez le D3 API, vous verrez que l'événement « glisser » utilise mousemove (ou touchmove pour les appareils tactiles):

glisser - après une passe de pointeur actif (sur mousemove ou touchmove) .

Maintenant vient l'information importante: mousemove est généré par le navigateur. Plus important que cela, le navigateur n'est pas obligé de générer l'événement par un taux spécifique, qu'il s'agisse de la distance ou de l'heure. En outre, d'autres facteurs peuvent influencer la fréquence de mousemove, comme le matériel que vous utilisez par exemple.

Donc, si nous supposons (juste pour simplifier) ​​que le navigateur génère un événement mousemove toutes les 100ms, vous avez une explication simple pour le comportement que vous décrit:

Étant donné que speed = distance/time, si vous déplacez plus vite votre souris, vous aurez moins d'événements du point A à B (c'est-à-dire que la distance entre un événement mousemove et le prochain sera plus grande). Si vous déplacez votre souris plus lentement, vous aurez plus d'événements du point A au point B (c'est-à-dire que la distance entre un événement mousemove et le prochain sera plus petite). Si vous déplacez votre souris à une vitesse inférieure à 1px/100ms (dans notre scénario hypothétique), vous aurez 1 événement par pixel. Enfin, voici une démonstration très simple le montrant. Cliquez et faites glisser partout dans le SVG:

var count = 0; 
 
d3.select("svg").call(d3.drag().on("start", function() { 
 
    console.log("drag started") 
 
}).on("drag", function() { 
 
    ++count; 
 
    console.log("drag event " + count) 
 
}).on("end", function() { 
 
    count = 0; 
 
    console.log("drag ended") 
 
}))

.as-console-wrapper { max-height: 20% !important;} 
 
svg { 
 
    border: 1px solid black; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>