D3 and SVG Paths
  Duration: 10:57
Part of Course: Introductory D3 Course
This Lesson is for subscribers

D3-and-svg-paths_280x158
Unlock this lesson NOW!
  • Get expert advice on D3 and SVG Paths
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • An SVG Polyline is used to create any shape that consists of only straight lines
  • The SVG Polyline takes in three main inputs: stroke, stroke-width, and list of points to connect
  • An SVG Polygon is used to create any shape that consists of at least 3 sides, all of which are themselves straight lines
  • The SVG Polygon takes in four main inputs: stroke, stroke-width, a list of points to connect, and a fill (which is used to fill the enclosing space)
  • The SVG Path behaves like a pen on a piece of paper - you start with the pen touching only one point and direct how the pen moves around the space (either through straight lines or through curves / arcs)
  • The SVG Path relies on the "d" attribute to define how it moves
  • The SVG Path has a specific mini-language, used in the "d" attribute" that defines all of the ways the "pen" can move around the space
  • D3 includes a set of Path Data Generator helper classes for generating SVG Path instructions
  • The most common D3 Path Generator is d3.svg.line
  • d3.svg.line takes in an array of objects, where each object has "x" and "y" values defined, and returns the SVG Path mini-language instructions

This Transcript is for subscribers.

D3-and-svg-paths_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on D3 and SVG Paths
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index