Axes
Given a data and Scales, the d3.svg.axis()
Axes component creates a horizontal-axis or/and vertical-axis.
Axis function can be setup like
var xaxis = d3.svg.axis()
You can provide sclae from previously defined xcale.
xaxis.scale(xscale)
or
var xaxis = d3.svg.axis()
.scale(xscale)
also provide position like:
xaxis.orient("bottom")
To generate the axis and into SVG, we must call the xaxis function:
svg.append("g")
.call(xaxis)
Add Axis to Scatterplot
//Define X axis
var xaxis = d3.svg.axis()
.scale(xscale)
.orient("bottom")
.ticks(5)
//Define Y axis
var yaxis = d3.svg.axis()
.scale(yscale)
.orient("left")
.ticks(5)
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xaxis)
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yaxis)