D3.js tutoriel - Partie 4 - Method chaining

Introduction

Method chaining ou chaînage ds méthodes est une syntaxe permettant d'appeler plusieurs méthodes en une seule instruction sur la même instance. Cela ne peut être mis en ouvre que les méthodes retournent l'object courant (this). Voici un exemple typique de chaînage de méthodes:

socket().destination(server).data(3.25).send();

La plupart des fonctions de la bibliothèque D3.js permettent le chaînage qui est une syntaxe courante dans la création de graphiques avec D3.js.

Exemple avec D3.js

Considérons l'exemple de la section précédente. Dans celui-ci, un élément <h1> est créé, puis un texte y est ajouté pour enfin changer la couleur du text en rouge. Voici le code précédent :

d3.select('body').append('h1');
d3.select('h1').text('This tag and text has been added with D3.js');
d3.select('h1').style('color', 'red');

Ce code peut être réécrit en utilisant un chaînage car chaque fonction retourne l'élément sélectionné :

Ordre d'exécution

Toutefois, une question subsiste : dans l'exemple suivant, quelle méthode est appelée en premier ?

d3.method1().method2();

method1() est nécessairement appelé avant method2(). Si ce n'était pas le cas et puisque method1() ne serait pas encore appelée, method2() n'aurait pas d'objet retourné à traiter. L'exemple suivant confirme cette affirmation dans lequel la dernière méthode est bien appelée en dernier :

// Method chaining order
d3.select('h1').text('First').text('Second')

En conclusion, les méthodes sont appelées de la gauche vers la droite.

Partie 3 Sommaire Partie 5

Voir aussi

Dernière mise à jour : 29/01/2020