To draw a shape, simply append a new tag in the SVG container and specify the properties of the shape as attributes. Since the syntax for drawing shapes is always the same, we will not detail each. We'll just provide an example (source code and online example) for each shape; you'll easily figure out how it works.
//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');