score:1

Accepted answer

You are translating the axis all the way down to the height of the SVG. You have to leave some margin.

For instance, this is your code right now (I'm simplifying your domain):

var wl = 550;
var hl = 150;
var svgl = d3.select("body").append("svg")
     .attr("width", wl)
     .attr("height", hl);

var xscalel1 = d3.scaleLinear()
      .domain([0, 100])
      .range([0, wl-30]);

svgl.append("g")
      .attr("transform", "translate(0," + hl + ")")
      .call( d3.axisBottom(xscalel1) );
<script src="https://d3js.org/d3.v4.min.js"></script>

Nothing will show up after clicking "run code snippet", just a blank space. You can't see anything, because this:

.attr("transform", "translate(0," + hl + ")")

Is moving the axis to the height (hl) of the SVG, that is, to its end.

Now let's see the same code with some margin, like this:

.attr("transform", "translate(0," + (hl - 20) + ")")

That way, we are moving the axis to 20 pixels before the end (height) of the SVG.

And here is the result, now you can see the axis:

var wl = 550;
var hl = 150;
var svgl = d3.select("body").append("svg")
     .attr("width", wl)
     .attr("height", hl);

var xscalel1 = d3.scaleLinear()
      .domain([0, 100])
      .range([0, wl-30]);

svgl.append("g")
      .attr("transform", "translate(0," + (hl - 20) + ")")
      .call( d3.axisBottom(xscalel1) );
<script src="https://d3js.org/d3.v4.min.js"></script>