Learning D3.js 5 Mapping - Second Edition

Paths with curves

Paths can also have curves. The concept is still the same; you connect several data points with lines. The main difference is that now you apply a curve to each line as it connects the dots. There are three types of curve commands:

• Cubic Bézier
• Quadratic Bézier
• Elliptical arc

Each command is explained in detail at http://www.w3.org/TR/SVG11/paths.html. As an example, let's apply a cubic Bézier curve to the triangle. The format for the command is as follows:

C x1 y1 x2 y2 x y 

This command can be inserted into the path structure at any point:

• C: Indicates that we are applying a Cubic Bézier curve, just as L in the previous example indicates a straight line
• x1 and y1: Adds a control point to influence the curve's tangent ...