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...