[Solved]-plotting tick text above the axis-d3.js

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 = d3.select("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="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>