Common shapes and primitives

Until now, we solely used the circle element to draw data points in the chart. However, SVG provides a rich set of more common shapes, which can also be directly used in D3.js. SVG built-in shapes are:

• rect

• circle

• ellipse

• line

• polyline

• polygon

To use built-in shapes in D3.js, we just append them to the SVG node and modify the attributes, just like before with the circle element.

Note

To read more about built-in SVG shapes and their attributes, take a look at the specification at http://www.w3.org/TR/SVG/shapes.html.

Let's look at some simple examples. By now, we should have no problems drawing an ellipse. All attributes and their usage can be found in the SVG specification, as shown in the following code:

var svg = d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 400);

var ellipse = svg.append("ellipse")
  .attr("cx", 200)
  .attr("cy", 200)
  .attr("rx", 180)
  .attr("ry", 90);

The output of the code in the browser looks like the following...