6. Drawing Curves and Shapes | Data Visualization with D3 and AngularJS

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

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Data Visualization with D3 and AngularJS

By : Hanchett, Körner

Data Visualization with D3 and AngularJS

By: Hanchett, Körner

Overview of this book

Curved lines with the SVG path

Data Visualization with D3 and AngularJS

By : Hanchett, Körner

Data Visualization with D3 and AngularJS

By: Hanchett, Körner

Overview of this book

Curved lines with the SVG path

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access