D3.js - API de zoom

Le zoom aide à mettre à l'échelle votre contenu. Vous pouvez vous concentrer sur une région particulière à l'aide de l'approche cliquer-glisser. Dans ce chapitre, nous discuterons en détail de l'API Zooming.

Configurer l'API

Vous pouvez charger l'API Zooming directement à partir de «d3js.org» en utilisant le script suivant.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

Méthodes d'API de zoom

Voici quelques-unes des méthodes d'API de zoom les plus couramment utilisées.

  • d3.zoom()
  • zoom(selection)
  • zoom.transform (sélection, transformation)
  • zoom.translateBy (sélection, x, y)
  • zoom.translateTo (sélection, x, y)
  • zoom.scaleTo (sélection, k)
  • zoom.scaleBy (sélection, k)
  • zoom.filter([filter])
  • zoom.wheelDelta([delta])
  • zoom.extent([extent])
  • zoom.scaleExtent([extent])
  • zoom.translateExtent([extent])
  • zoom.clickDistance([distance])
  • zoom.duration([duration])
  • zoom.interpolate([interpolate])
  • zoom.on (noms de types [, auditeur])

Passons en revue toutes ces méthodes de l'API Zooming en bref.

d3.zoom ()

Cela crée un nouveau comportement de zoom. Nous pouvons y accéder en utilisant le script ci-dessous.

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

zoom (sélection)

Il est utilisé pour appliquer la transformation de zoom sur un élément sélectionné. Par exemple, vous pouvez instancier un comportement mousedown.zoom à l'aide de la syntaxe suivante.

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform (sélection, transformation)

Il est utilisé pour définir la transformation de zoom actuelle des éléments sélectionnés sur la transformation spécifiée. Par exemple, nous pouvons réinitialiser la transformation de zoom sur la transformation d'identité en utilisant la syntaxe ci-dessous.

selection.call(zoom.transform, d3.zoomIdentity);

Nous pouvons également réinitialiser la transformation de zoom à la transformation d'identité pendant 1000 millisecondes en utilisant la syntaxe suivante.

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy (sélection, x, y)

Il est utilisé pour traduire la transformation de zoom actuelle des éléments sélectionnés par des valeurs x et y. Vous pouvez spécifier les valeurs de conversion x et y sous forme de nombres ou de fonctions renvoyant des nombres. Si une fonction est invoquée pour l'élément sélectionné, alors elle est passée par la donnée courante «d» et l'index «i» pour DOM. Un exemple de code est défini ci-dessous.

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo (sélection, x, y)

Il est utilisé pour traduire la transformation de zoom actuelle des éléments sélectionnés à la position spécifiée de x et y.

zoom.scaleTo (sélection, k)

Il est utilisé pour mettre à l'échelle la transformation de zoom actuelle des éléments sélectionnés à k. Ici,k est un facteur d'échelle, spécifié sous forme de nombres ou de fonctions.

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy (sélection, k)

Il est utilisé pour mettre à l'échelle la transformation zoon actuelle des éléments sélectionnés par k. Ici,k est un facteur d'échelle, spécifié sous forme de nombres ou de fonctions renvoyant des nombres.

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter ([filtre])

Il est utilisé pour définir le filtre sur la fonction spécifiée pour le comportement du zoom. Si le filtre n'est pas spécifié, il renvoie le filtre actuel comme indiqué ci-dessous.

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

zoom.wheelDelta ([delta])

La valeur de Δest renvoyé par la fonction delta de roue. Si delta n'est pas spécifié, il renvoie la fonction delta de roue actuelle.

zoom.extent ([étendue])

Il est utilisé pour définir l'étendue des points de tableau spécifiés. Si l'étendue n'est pas spécifiée, elle renvoie l'accesseur d'étendue actuel, qui est par défaut [[0, 0], [width, height]], où width est la largeur client de l'élément et height est sa hauteur client.

zoom.scaleExtent ([étendue])

Il est utilisé pour définir l'étendue de l'échelle sur le tableau de nombres spécifié [k0, k1]. Ici,k0est le facteur d'échelle minimum autorisé. Tandis que,k1est le facteur d'échelle maximal autorisé. Si l'extension n'est pas spécifiée, elle renvoie l'étendue d'échelle actuelle, qui est par défaut [0, ∞]. Considérez l'exemple de code défini ci-dessous.

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

L'utilisateur peut essayer de zoomer en tournant, lorsqu'il est déjà à la limite correspondante de l'étendue de l'échelle. Si nous voulons empêcher le défilement sur l'entrée de la molette quelle que soit l'étendue de l'échelle, enregistrez un écouteur d'événement de la roue pour empêcher le comportement par défaut du navigateur.

zoom.translateExtent ([étendue])

Si l'étendue est spécifiée, elle définit l'étendue de translation sur le tableau de points spécifié. Si l'extension n'est pas spécifiée, elle retourne l'étendue de traduction actuelle, qui est par défaut [[-∞, -∞], [+ ∞, + ∞]].

zoom.clickDistance ([distance])

Cette méthode est utilisée pour définir la distance maximale à laquelle la zone zoomable peut se déplacer entre le haut et le bas, ce qui déclenchera un événement de clic ultérieur.

zoom.duration ([durée])

Cette méthode est utilisée pour définir la durée des transitions de zoom lors d'un double-clic et d'un double-clic jusqu'au nombre spécifié de millisecondes et renvoie le comportement de zoom. Si la durée n'est pas spécifiée, elle renvoie la durée actuelle, qui est par défaut de 250 millisecondes, qui est définie ci-dessous.

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpoler ([interpoler])

Cette méthode est utilisée pour interpoler les transitions de zoom vers la fonction spécifiée. Si interpoler n'est pas spécifié, il renvoie la fabrique d'interpolation actuelle, qui est par défaut d3.interpolateZoom.

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

Si l'écouteur est spécifié, il définit l'écouteur d'événements pour les noms de types spécifiés et renvoie le comportement de zoom. 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 zoom.one et zoom.second. Le nom permet à plusieurs écouteurs d'être enregistrés pour le même type. Ce type doit appartenir à l'un des éléments suivants:

  • Start - après le début du zoom (par exemple lors de la descente de la souris).

  • Zoom - après une modification de la transformation du zoom (comme à la souris).

  • End - après la fin du zoom (comme sur la souris).

Dans le chapitre suivant, nous aborderons les différentes API de requêtes dans D3.js.