Pourquoi ne d3.js v3 casser ma force graphique lors de la mise en œuvre de zoom lors de la v2 ne l'est pas?

Si vous parcourez le notes de version, vous verrez une explication complète de tout ce qui a changé entre la version finale de 2.x (2.10.3) et la version la plus récente, 3.2.7. En particulier, à partir de la version 3.2.2:

Une meilleure gestion du glisser-gestes en d3.comportement.faites glisser, d3.comportement.zoom et d3.svg.brosse en n'empêchant pas les comportements par défaut ou de l'arrêt de la propagation. Par exemple, mousedown maintenant les changements de focus, mouseup à l'extérieur d'une iframe fonctionne correctement, et les évènements touchstart ne pas bégayer.

Donc, dans la V2, faites glisser le comportement pourrait prendre la priorité sur le comportement du zoom par l'arrêt de la propagation du zoom événements. Dans la V3, ça ne se fait plus automatiquement, vous donnant le choix de comportement qui prend la priorité, et quand.

Si vous voulez donner la faites glisser le comportement de priorité lorsque vous faites glisser les nœuds, puis vous devez stopPropagation sur les événements d'entrée tout en faisant glisser afin que ces événements ne sont pas interprétées simultanément en tant que panoramique par le comportement du zoom. L'arrêt de la propagation sur dragstart est suffisante:

var drag = d3.behavior.drag()
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); })
    .on("drag", function() { /* handle drag event here */ });

Si à l'aide d'une force de mise en page, le code est:

var drag = force.drag()
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); });

De travail exemple:

Remarque: la combinaison de ces deux comportements signifie que le geste de l'interprétation est ambiguë et très sensible à la position. Un clic sur un cercle est interprété comme faisant glisser le cercle, tandis qu'un clic d'un pixel à l'écart pourrait être interprété comme un panoramique à l'arrière-plan. Une méthode plus solide de la combinaison de ces comportements est d'utiliser la modalité. Par exemple, si l'utilisateur maintient la touche ESPACE, en cliquant et en faisant glisser est interprété comme le panoramique, plutôt que de glisser, quel que soit le clic. Cette approche est couramment employée dans les logiciels commerciaux tels que Adobe Photoshop.