Accepted answer

If you want the ticks on top of the axis, you should use axisTop, instead of axisBottom.

The names are pretty easy to understand and the API is very clear:

  • d3.axisTop(scale): In this orientation, ticks are drawn above the horizontal domain path.

  • d3.axisBottom(scale): In this orientation, ticks are drawn below the horizontal domain path. (emphases mine)

Here is a demo, the first axis uses axisTop, and the second one, below, uses axisBottom:

var svg ="svg");
var x = d3.scaleLinear().range([20, 280]);
var xAxisTop = d3.axisTop(x)(svg.append("g").attr("transform", "translate(0,50)"))
var xAxisBottom = d3.axisBottom(x)(svg.append("g").attr("transform", "translate(0,100)"))
<script src=""></script>

Related Query

More Query from same tag