Pour dessiner une forme, ajoutez simplement une nouvelle balise dans le conteneur SVG et spécifiez les propriétés de la forme dans les attributs. Comme la syntaxe pour dessiner des formes est toujours la même, nous ne détaillerons pas chaque primitive. Nous allons simplement fournir un exemple (code source et exemple en ligne) pour chaque forme. Grâce à ces exemples, vous comprendrez facilement le fonctionnement de chaque forme.
//Draw the Circle
var circle = svg.append("circle")
.attr("cx", 150)
.attr("cy", 30)
.attr("r", 20);
var circle = svg.append("ellipse")
.attr("cx", 150)
.attr("cy", 100)
.attr("rx", 20)
.attr("ry", 60);
var rectangle = svg.append("rect")
.attr("x", 10)
.attr("y", 40)
.attr("width", 50)
.attr("height", 100);
var circle = svg.append("line")
.attr("x1", 5)
.attr("y1", 5)
.attr("x2", 100)
.attr("y2", 50)
.attr("stroke-width", 2)
.attr("stroke", "black");
var circle = svg.append('text')
.attr('x', 100)
.attr('y', 50)
.text("I'm a text with D3.js");
var circle = svg.append('polyline')
.attr('points', "50,50 100,50 100,100 150,100 200,150 250 150")
.attr('fill', "none")
.attr('stroke', 'blue');
var circle = svg.append('polygon')
.attr('points', "50,50 200,50 250,100 250,150 20,50")
.attr('stroke', '#f00')
.attr('fill', 'none');
var circle = svg.append('polygon')
.attr('points', "50,50 200,50 250,100 250,150 20,50")
.attr('fill', 'green');