Curved lines with the SVG path

What if we need to draw with curved lines? Now, we will be able to draw all possible polygons, but we lack the possibility of drawing more complex shapes (such as curves and polynomial functions). Fortunately, the SVG standard provides a very flexible element for this called the path element. With this element, one can draw the most flexible curves and shapes as well as all the previous common shapes.

The path element takes a d attribute to define the exact shape of the path. The shape can be defined with special commands (such as drawing straight line, drawing smooth curve, and so on) and point coordinates.

Let us first look at the preceding example; we want to draw the same star-shaped polygon, but this time with the use of the path element, as shown in the following code:

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

var polygon = svg.append("path")
  .attr("d", 'M350,75  L379,161 469,161 397,215 423,301 350,250 277...