Les graphiques D3.js s'appuient sur des conteneurs SVG (Scalable Vector Graphics). SVG est un format d'image vectoriel basé sur la syntaxe XML dont le standard est ouvert. L'idée de base est d'ajouter un conteneur SVG (balise SVG) où le graphique D3.js doit apparaître. Le graphic sera ensuite insérer dans le conteneur. Pour commencer, regardons comment ajouter un conteneur SVG dans le document:
var svg = d3.select("body")
.append("svg")
.attr("width", 300)
.attr("height", 200)
.style('background-color', 'lightgrey')
<svg>
dans la pageVoici un exemple en ligne:
Pour dessiner un cercle dans un conteneur SVG, il suffit d'ajouter une balise <circle>
dans le conteneur et de définir les propriétés du cercle dans les attributs de ce dernier :
//Draw the Circle
var circle = svg.append("circle")
.attr("cx", 150)
.attr("cy", 30)
.attr("r", 20);
Le code ci-dessus dessine un cercle avec les propriétés suivantes :
Voici notre cercle :