D3 Axes Manipulation
  Duration: 9:07
Part of Course: Introductory D3 Course
This Lesson is for subscribers

D3-axes-manipulation_280x158
Unlock this lesson NOW!
  • Get expert advice on D3 Axes Manipulation
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • The D3 Axis Component, d3.svg.axis(), displays reference lines, labeled ticks, and does the math to get equal space between the ticks for any D3 Scale you provide automatically
  • The D3 Axis Component is a function, so you have to pass it an argument in which it can do work on - this is always a D3 Selection inside of which it will generate the SVG Axis for us
  • The D3 Axis Component has a method, .orient([orientation]), for getting/setting the position of the ticks and their labels in relation to the axis path (the actual axis line)
  • For horizontal axes, the key words are "top" and "bottom"
  • For vertical axes, the key words are "left" and "right"
  • The default orientation is a horizontal axis with a "bottom" orientation (that is - the ticks and labels are below the line)
  • If you use "left" or "right", D3 changes your axis from a horizontal axis to a vertical axis, which solves the issue of figuring out how to manually rotate ticks, lines, and the path line so that the axis is vertical rather than horizontal
  • The orientation is orienting the ticks and text on either side of the path line, it is not putting the axis on the left or right or top or bottom of the SVG Group Element Container you are calling it from

This Transcript is for subscribers.

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