web-dev-qa-db-fra.com

Fonction d'appel de la bibliothèque Javascript d3

Je ne suis pas en mesure de comprendre comment fonctionne d3.call () et quand et où l'utiliser. Ici est le lien du tutoriel que j'essaie de terminer.

Quelqu'un peut-il expliquer précisément ce que fait cette pièce?

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

svg.append("g").call(xAxis);
javascriptd3.js
65
Andy897

Je pense que l'astuce 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 retournée par d3.svg.axis(). Les fonctions d'échelle et d'orientation ne sont qu'une partie de la syntaxe de chaînage (en savoir plus ici: http://alignedleft.com/tutorials/d3/chaining-methods/ ).

Donc svg.append("g") ajoute un élément de groupe SVG au svg et retourne une référence à lui-même sous la forme d'une sélection (même syntaxe de chaîne à l'œuvre 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 équivaut à:

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

ou:

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