Certaines balises HTML acceptent des attributs (par exemple "href" pour la balise <a> ou encore "src" pour la balise <img/>). D3 permet d'ajouter des attributs à une balise précédemment créée en utilisant la méthode attr

À faire vous même 3.1

script.js


var body=d3.select("body");
body.append("a")
    .attr("href","https://d3js.org/")
    .text("Ceci est un lien, cliquez ici");
			

Testez ce code


Une remarque sur ce code :

Nous avons créé une balise <a> puis nous avons ajouté l'attribut href="https://d3js.org/" à cette balise <a>

La méthode attr prend 2 arguments :

Pour résumer, notre code a permis de mettre en place la structure suivante :


<body>
  <a href="https://d3js.org/">Ceci est un lien, cliquez ici</a>
</body>
			

À faire vous même 3.2

Modifiez le fichier script.js afin qu'il permette d'afficher l'image de votre choix dans votre navigateur (il est évidemment interdit de modifier directement le fichier index.html).


Il est possible de modifier le style appliqué à une balise (comme nous pourrions le faire avec du CSS) en utilisant la méthode style.

À faire vous même 3.3

script.js


var body=d3.select("body");
body.append("h1")
    .style("color","red")
    .text("Voici un titre en rouge");
			

Testez ce code


Notez que l'ordre d'application des méthodes style et text n'a pas d'importance


var body=d3.select("body");
body.append("h1")
    .text("Voici un titre en rouge")
    .style("color","red");
			

Ce code donne le même résultat que celui vu dans le "À faire vous même 3.3"

Il est possible d'appliquer plusieurs fois la méthode style sur une même balise.

À faire vous même 3.4

script.js


var body=d3.select("body");
body.append("h1")
    .style("color","red")
    .style("text-align","center")
    .text("Voici un titre rouge et centré");
			

Testez ce code