Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Data Visualization with D3 and AngularJS

You're reading from  Data Visualization with D3 and AngularJS

Product type Book
Published in Apr 2015
Publisher
ISBN-13 9781784398484
Pages 278 pages
Edition 1st Edition
Languages
Authors (2):
Erik Hanchett Erik Hanchett
Profile icon Erik Hanchett
Christoph Körner Christoph Körner
Profile icon Christoph Körner
View More author details

Table of Contents (16) Chapters

Data Visualization with D3 and AngularJS
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
The Magic of SVG, D3.js, and AngularJS Getting Started with D3.js Manipulating Data Building a Chart Directive Loading and Parsing Data Drawing Curves and Shapes Controlling Transitions and Animations Bringing the Chart to Life with Interactions Building a Real-time Visualization to Monitor Server Logs Index

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...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime}