D3.js - API de glissement

Le glisser-déposer est l'un des concepts les plus connus de d3.js. Ce chapitre explique en détail le glissement et ses méthodes.

Installation

Nous pouvons directement inclure l'API de glissement en utilisant le script suivant.

<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>

Faire glisser les méthodes API

Voici quelques-unes des méthodes API de glissement les plus importantes de D3.js.

  • d3.drag()
  • drag(selection)
  • drag.container([container])
  • drag.filter([filter])
  • drag.subject([subject])
  • drag.clickDistance([distance])
  • drag.on (noms de types, [auditeur])
  • d3.dragDisable(window)
  • d3.dragEnable (fenêtre [, noclick])

Voyons maintenant chacun d'eux en détail.

d3.drag ()

Cette méthode est utilisée pour créer un nouveau glissement. Vous pouvez appeler cette méthode à l'aide du script suivant.

<script>
   var drag = d3.drag();
</script>

faire glisser (sélection)

Cette méthode est utilisée pour appliquer le glissement à la sélection spécifiée. Vous pouvez appeler cette fonction en utilisantselection.call. Un exemple simple est défini ci-dessous.

d3.select(".node").call(d3.drag().on("drag", mousemove));

Ici, le comportement de glissement appliqué aux éléments sélectionnés se fait via selection.call.

drag.container([container])

Il est utilisé pour définir le conteneur sur la fonction spécifiée pour le glissement. Si aucun conteneur n'est spécifié, il renvoie l'accesseur actuel. Pour faire glisser des éléments graphiques avec un canevas, vous pouvez redéfinir le conteneur comme lui-même. Il est défini ci-dessous.

function container() {
   return this;
}

drag.filter ([filtre])

Il est utilisé pour définir le filtre pour la fonction spécifiée. Si le filtre n'est pas spécifié, il renvoie le filtre actuel tel que défini ci-dessous.

function filter() {
   return !d3.event.button;
}

drag.subject ([sujet])

Il est utilisé pour définir le sujet sur la fonction spécifiée pour le glissement et est défini ci-dessous.

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

Ici, le sujet représente la chose traînée. Par exemple, si vous souhaitez faire glisser des éléments de rectangle dans SVG, le sujet par défaut est la donnée du rectangle en cours de déplacement.

drag.clickDistance ([distance])

Cette méthode est utilisée pour définir la distance maximale pour cliquer sur un événement mousedown et mouseup. Si la distance n'est pas spécifiée, elle pointe vers zéro.

drag.on (noms de types, [auditeur])

Cette méthode est utilisée pour définir l'écouteur d'événements pour les noms de types spécifiés pour le glissement. Les noms de types sont une chaîne contenant un ou plusieurs noms de types séparés par des espaces. Chaque nom de type est un type, éventuellement suivi d'un point (.) Et d'un nom, tel que drag.one et drag.two. Ce type doit être l'un des suivants -

  • start - démarre un nouveau pointeur.

  • drag - fait glisser un pointeur actif.

  • end - Inactif un pointeur actif.

d3.dragDisable (fenêtre)

Cette méthode est utilisée pour désactiver la sélection par glisser-déposer. Il empêche l'action d'événement mousedown. La plupart des navigateurs sélectionnés prennent en charge cette action par défaut. S'il n'est pas pris en charge, vous pouvez définir la propriété CSS sur aucun.

d3.dragEnable (fenêtre [, noclick])

Cette méthode est utilisée pour activer la sélection par glisser-déposer à l'emplacement de fenêtre spécifié. Il est utilisé pour appeler l'action d'événement mouseup. Si vous attribuez la valeur true à noclick, l'événement click expire avec un délai de zéro milliseconde.

Glisser l'API - Glisser les événements

La méthode D3.event est utilisée pour définir l'événement glisser. Il se compose des champs suivants -

  • Target - Il représente le comportement de traînée.

  • Type - Il s'agit d'une chaîne et peut être l'un des suivants: «start», «drag» ou «end».

  • Subject - Le sujet de glissement, défini par drag.subject.

event.on (noms de types, [auditeur])

L'objet événement expose la méthode event.on pour effectuer le glissement. Il est défini comme suit.

d3.event.on("drag", dragged).on("end", ended);