D3 Axes
  Duration: 17:16
Part of Course: Introductory D3 Course
This Lesson is for subscribers

D3-axes_280x158
Unlock this lesson NOW!
  • Get expert advice on D3 Axes
  • 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 works with D3 Quantitative Scales, D3 Times Scales, and D3 Ordinal Scales
  • Using the D3 Scale, you can tell the D3 SVG Axis Component what the domain and range should be for the scale you want to use, and the D3 SVG Axis Component will do all the math behind the scenes for us
  • 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
  • Because the D3 Axis Component does the minimum amount of work, it doesn't take into account the fact that some of the SVG Graphical Elements it generates could be outside of the SVG Viewport, so you need to use the D3 Margin Convention
  • By using the D3 Margin Convention and defining the margin.top, margin.bottom, margin.left, and margin.right you can do an SVG transform translate to ensure there Axis the D3 Axis Component generates appears fully in the SVG Viewport

This Transcript is for subscribers.

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