Using d3.path to draw paths

In this section, we're going to explore the functions provided by the d3.path function to directly define a path that can be drawn with D3.

Drawing using the path API

Creating paths directly with SVG is rather complex, and it involves writing statements like this:

<path d=" 
  M 213.1,6.7 
  c -32.4-14.4-73.7,0-88.1,30.6 
  C 110.6,4.9,67.5-9.5,36.9,6.7 
  C 2.8,22.9-13.4,62.4,13.5,110.9 
  C 33.3,145.1,67.5,170.3,125,217 
  c 59.3-46.7,93.5-71.9,111.5-106.1 
  C 263.4,64.2,247.2,22.9,213.1,6.7 
  z" /> 

As we've already seen in earlier chapters, D3 hides most of this complexity behind path generators. Sometimes, though, you might need to create a path generator yourself, or you might want to be able to draw a path yourself. Luckily, D3 provides an easier way to do this, so you don't have to write the SVG path definitions yourself. Through the d3.path function, you get a number of functions that you can use to define your path. The first thing you need to do...