How to make the grids of a chart be in line with axes

Question

As mentioned in the title, the chart which I have drawn has its grids outside of the axes as shown in the link below. I am importing this extension to Thingworx to draw the chart. There is probably something wrong with my code but I can't seem to figure it out.

Visit this link to see the chart I have now: chart or visit this link to my jsfiddle jsfiddle . However I have no idea why it only displays the chart at the top left corner of the output console.

var data = [ {x: 0, y: 0}, {x: 1, y: 30}, {x: 2, y: 40},
    {x: 3, y: 60}, {x: 4, y: 70}, {x: 5, y: 90} ];

    const margin = {
        left: 20,
        right: 20,
        top: 20,
        bottom: 20 
    };

    const svg = d3.select('svg');
    svg.selectAll("*").remove();

    const innerWidth = 200 - margin.left - margin.right;
    const innerHeight = 200 - margin.top - margin.bottom;

    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);


    // interpolator for X axis -- inner plot region
    var x = d3.scaleLinear()
        //.domain(d3.extent(data, xValue))
        //.domain([0, 5])
        .domain([0, d3.max(data, function(d){ return d.x; })])
        .range([0,innerWidth])
        .nice();

    // interpolator for Y axis -- inner plot region
    var y = d3.scaleLinear()
        //.domain(d3.extent(data, yValue))
        //.domain([0, 100])
        .domain([0, d3.max(data, function(d){ return d.y; })])
        //.range([innerHeight,0])
        //modify y-axis such that it increases top down
        .range([0,innerHeight])
        .nice();

    //for x axis
    g.append("g")
        .attr("class", "xAxis")
        .call(d3.axisBottom(x))
        //.attr("transform", "translate(0," + innerHeight + ")");

    //for y axis 
    g.append("g")
        .attr("class", "yAxis")
        .call(d3.axisLeft(y))
        .append("text").attr("transform", "rotate(-90)").attr("text-anchor", "end");

    const xAxis = d3.axisBottom()
        .scale(x)
        //.scale(xScale)
        .ticks(5)
        //.tickSizeInner(-innerHeight)
        //.tickSizeOuter(0)
        .tickPadding(15)
        .tickSize(-innerHeight)

    const yAxis = d3.axisLeft()
        .scale(y)
        //.scale(yScale)
        .ticks(5)
        //.tickSizeInner(-innerWidth)
        //.tickSizeOuter(0)
        .tickPadding(15)
        .tickSize(-innerWidth);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    d3.selectAll("g.xAxis g.tick")
    .append("line") 
    .attr("class", "gridline")
    .attr("x1", 0) 
    .attr("y1", 0)
    .attr("x2", innerWidth)
    .attr("y2", 0);

    d3.selectAll("g.yAxis g.tick") 
    .append("line") 
    .attr("class", "gridline")
    .attr("x1", 0) 
    .attr("y1", -innerHeight)
    .attr("x2", 0)
    .attr("y2", 0)

    //xAxisG.call(xAxis);
    //yAxisG.call(yAxis);

    //the line function for path 
    var lineFunction = d3.line()
        .x(function(d) {return x(d.x); })
        .y(function(d) {return y(d.y); })
        .curve(d3.curveLinear);

    //defining the lines
    var path = g.append("path");

    //plotting lines
    path
        .attr("d", lineFunction(data))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");

Answer 1

I have improved your fiddle: https://jsfiddle.net/y1vctdsg/1/ I have changed following part of the code:

svg.append("g")
 .attr("class", "x axis")
 .attr("transform", `translate(20,${height+margin.top})`)
 .call(xAxis);

And also I've changed from axisBottom() to axisTop() only for better readability:

g.append("g")
 .attr("class", "xAxis")
 .call(d3.axisTop(x))