Until now, we just scaled our dataset without drawing a single shape on the screen. For the next step, I want to introduce d3.svg.axis(), a built-in function to draw axes and labels. This function makes it very easy and comfortable to add an axis to a chart, as shown in the following code:
var axis = d3.svg.axis();
First, we create a new
axis object with d3.svg.axis(), which we can then configure by calling different methods on it. I will now discuss the most important of these methods:
axis.scale([scale]): This adds scaling to an axis as follows:var scale = d3.scale.linear() .domain([0, 10]) .range([0, 100]); var axis = d3.svg.axis() .scale(scale);
axis.orient([orientation]): This specifies an orientation of the ticks values relative to the axis. The orientation can be top, bottom, left, or right:var axis = d3.svg.axis() .orient('bottom');axis.ticks([arguments…]): This specifies the tick number or interval relative to the given scale, as shown in the following code...