D3 version 4 AXIS - d3.js

Question

Does someone know why I can't see the axis of my line chart?
This is the link to the chart: https://d3responsive.firebaseapp.com/responsive.html
And this is the JavaScript code:
/* D3-v4 curve interpolation comparison: https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529 */
var dataline1 = [
{"mes":1, "impuestoPorcentaje":20},
{"mes":2, "impuestoPorcentaje":14},
{"mes":3, "impuestoPorcentaje":20},
{"mes":4, "impuestoPorcentaje":21},
{"mes":5, "impuestoPorcentaje":15},
{"mes":6, "impuestoPorcentaje":22},
{"mes":7, "impuestoPorcentaje":9},
{"mes":8, "impuestoPorcentaje":6},
{"mes":9, "impuestoPorcentaje":23},
{"mes":10, "impuestoPorcentaje":7},
{"mes":11, "impuestoPorcentaje": 40},
{"mes":12, "impuestoPorcentaje": 45}
];
var dataline2 = [
{"mes":1, "impuestoPorcentaje":14},
{"mes":2, "impuestoPorcentaje":19},
{"mes":3, "impuestoPorcentaje":24},
{"mes":4, "impuestoPorcentaje":24},
{"mes":5, "impuestoPorcentaje":24},
{"mes":6, "impuestoPorcentaje":27},
{"mes":7, "impuestoPorcentaje":32},
{"mes":8, "impuestoPorcentaje":38},
{"mes":9, "impuestoPorcentaje":11},
{"mes":10, "impuestoPorcentaje":25},
{"mes":11, "impuestoPorcentaje": 40},
{"mes":12, "impuestoPorcentaje": 45}
];
var wl = 550;
var hl = 450;
var svgl = d3.select("body").append("svg")
.attrs({
width: wl,
height: hl
});
// Domain and ranges
var xscalel1 = d3.scaleLinear()
.domain([0, d3.max(dataline1, function(d) {
return d.mes;
})])
.range([0, wl - 30]);
var yscalel1 = d3.scaleLinear()
.domain([0, d3.max(dataline1, function(d) {
return d.impuestoPorcentaje;
})])
.range([hl - 30, 15]);
var xscalel2 = d3.scaleLinear()
.domain([0, d3.max(dataline2, function(d) {
return d.mes;
})])
.range([0, wl - 30]);
var yscalel2 = d3.scaleLinear()
.domain([0, d3.max(dataline2, function(d) {
return d.impuestoPorcentaje;
})])
.range([hl - 30, 15]);
// Lines
var lineOne = d3.line()
.x(function(d) {
return xscalel1(d.mes);
})
.y(function(d) {
return yscalel1(d.impuestoPorcentaje);
})
.curve(d3.curveLinear);
var lineTwo = d3.line()
.x(function(d) {
return xscalel2(d.mes);
})
.y(function(d) {
return yscalel2(d.impuestoPorcentaje);
})
.curve(d3.curveMonotoneX);
var vis = svgl.append("path")
.attrs({
d: lineOne(dataline1),
"stroke": "#008080",
"stroke-width": 2,
"fill": "none"
});
var vis2 = svgl.append("path")
.attrs({
d: lineTwo(dataline2),
"stroke": "orange",
"stroke-width": 2,
"fill": "none"
});
// Add the x Axis
svgl.append("g")
.attr("transform", "translate(0," + hl + ")")
.call(d3.axisBottom(xscalel1));
// Add the y Axis
svgl.append("g")
.call(d3.axisLeft(yscalel1));

Answer 1

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>