D3版本4 AXIS

Question

有人知道为什么我看不到折线图的轴吗？

这是图表的链接：https://d3responsive.firebaseapp.com/responsive.html

这是JavaScript代码：

/* 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));