D3.js tutoriel - Partie 3 - Méthodes élémentaires
Ajouter du texte
La méthode .text() ajoute du texte dans l'élément sélectionné. Par exemple :
d3.select('h1').text('This text has been added with D3.js');L'exemple précédent ajoute du texte dans la première balise <h1>. Si l'élément contient
déjà du texte, celui est remplacé.
Modifier le style
La méthode .style() ajoute ou actualise le style CSS de l'élement sélectionné. Par exemple :
d3.select('h1').style('color', 'red');La ligne précédent change la couleur du premier élement <h1> en rouge.
Modifier les attributs
La méthode .attr() ajoute ou actualise un attribut de l'élement sélectionner. Par exemple:
d3.select('h1').attr('class', 'myClass');La ligne précédente ajoute myClass à la première balise <h1>.
Ajouter ou inserer des éléments
Les méthodes .append() et .insert() ajoute et insert un nouvel élément. Par exemple
d3.select('body').append('h1');La ligne précédent ajoute une balise <h1> après l'élément sélectionné.
Exemple
L'exemple suivant illustre quelques unes des méthodes présentées sur cette page :
Voir aussi
- D3.js tutoriel
- D3.js tutoriel - Partie 1 - Démarrer avec D3.js
- D3.js tutoriel - Partie 2 - Sélecteurs
- D3.js tutoriel - Partie 4 - Method chaining
- D3.js tutoriel - Partie 5 - Créer un SVG et dessiner un cercle
- D3.js tutoriel - Partie 6 - Formes élémentaires
- D3.js tutoriel - Partie 7 - Data binding
- D3.js tutorial - Partie 8 - Diagramme à barres
- D3.js tutorial - Partie 9 - Redimensionner les graphiques
- D3.js tutoriel - Partie 10 - Définir l'échelle avec scale()
- D3.js tutoriel - Partie 11 - Graphiques responsifs
- D3.js tutorial - Partie 12 - Les axes
Dernière mise à jour : 28/01/2020
