D3 exprime tout son potentiel quand il est utilisé avec des balises de type "svg". Pour revoir les notions sur le svg, consultez ces activités
script.js
var body=d3.select("body");
var svg=body.append("svg");
svg.attr({"width":"800px","height":"600px"})
svg.style("border","1px solid black");
Testez ce code
Dans l'exemple du "À faire vous même 4.1", nous créons une balise <svg> que nous plaçons dans la balise <body>. Nous donnons une hauteur et une largeur à notre surface de dessin svg (svg.attr({"width":"800px","height":"600px"})) puis nous ajoutons une bordure autour de cette même zone de dessin (svg.style("border","1px solid black");).
Nous pouvons maintenant commencer à dessiner, par exemple en plaçant un disque de 50 pixels de rayon au centre de notre zone de dessin
script.js
var body=d3.select("body");
var svg=body.append("svg");
svg.attr({"width":"800px","height":"600px"})
svg.style("border","1px solid black");
svg.append("circle")
.attr({"cx":"400px","cy":"300px","r":"50px"});
Testez ce code
Modifiez le code précédent pour que le disque apparaisse bleu avec un contour rouge.
Il est possible d'utiliser toutes les balises svg que nous avons vu dans cette série d'activités.
En utilisant vos connaissances en matière de svg, modifiez le fichier script.js afin d'obtenir quelque chose qui ressemble à ceci.