Bibliothèque Javascript d3 fonction d'appel

Question

Je n'arrive pas à comprendre comment fonctionne d3.call() et quand et où l'utiliser. Ici est le lien du tutoriel que j'essaie de compléter.

Quelqu'un peut-il m'expliquer ce que fait cette pièce ?

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

svg.append("g").call(xAxis);

Answer 1

Je pense que le truc ici est de comprendre que xAxis est une fonction qui génère un tas d'éléments SVG. En fait, c'est la fonction renvoyée par d3.svg.axis() . Les fonctions scale et orient font simplement partie de la syntaxe de chaînage (pour en savoir plus, cliquez ici) : http://alignedleft.com/tutorials/d3/chaining-methods/ ).

Así que svg.append("g") ajoute un élément de groupe SVG au svg et renvoie une référence à lui-même sous la forme d'une sélection (la même syntaxe de chaîne est utilisée ici). Lorsque vous utilisez call sur une sélection, vous appelez la fonction nommée xAxis sur les éléments de la sélection g . Dans ce cas, vous exécutez la fonction d'axe, xAxis sur le groupe nouvellement créé et ajouté, g .

Si cela n'a toujours pas de sens, la syntaxe ci-dessus est équivalente à :

xAxis(svg.append("g"));

ou :

d3.svg.axis()
      .scale(xScale)
      .orient("bottom")(svg.append("g"));

Answer 2

Ce que la réponse acceptée a laissé de côté, c'est que .call() es un Fonction API D3 et à ne pas confondre avec Fonction.prototype.call()

selection.call(function[, arguments…])

Appelle la fonction spécifiée exactement une fois, en passant cette sélection ainsi que les arguments optionnels. Retourne cette sélection. Cela équivaut à invoquer la fonction à la main, mais facilite le chaînage des méthodes. Par exemple, pour définir plusieurs styles dans une fonction réutilisable :

Maintenant, dites :

d3.selectAll("div").call(name, "John", "Snow");

C'est à peu près équivalent à :

name(d3.selectAll("div"), "John", "Snow");

où le nom est une fonction, par exemple

function name(selection, first, last) {
  selection
      .attr("first-name", first)
      .attr("last-name", last);
}

La seule différence est que selection.call renvoie toujours la sélection et non la valeur de retour de la fonction appelée le nom.