O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required