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

by kahmeng96

HTML

<svg class="xy_chart"></svg>

CSS

.xy_chart{
  position: relative;
  left: 50px
}

JavaScript

var data = [ {x: 0, y: 0, y1: 0}, {x: 1, y: 30, y1: 100}, {x: 2, y: 40, y1: 200},
            {x: 3, y: 60, y1: 300}, {x: 4, y: 70, y1: 400}, {x: 5, y: 90, y1: 500} ];

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

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

const width = 200 - margin.left - margin.right;
const height = 200 - margin.top - margin.bottom;

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

var x = d3.scaleLinear()
        .domain([0, d3.max(data, function(d){ return d.x; })])
        .range([0,width])
        .nice();

var y = d3.scaleLinear()
        .domain([0, d3.max(data, function(d){ return d.y; })])
        .range([0,height])
        .nice();
 
var y1 = d3.scaleLinear()
        .domain([0, d3.max(data, function(d) { return d.y1; })])
        .range([0, height])
        .nice();

const xAxis = d3.axisTop()
            .scale(x)
            .ticks(5)
            .tickPadding(3)
            .tickSize(-height)

const yAxis = d3.axisLeft()
            .scale(y)
            .ticks(5)
            .tickPadding(3)
            .tickSize(-width);

const yAxis1 = d3.axisRight()
						.scale(y1)

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

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

svg.append("g")
  .attr("class", "y1 axis")
  .attr("transform", "translate(185,20)")
  .call(yAxis1);


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

var lineFunctionOne = d3.line()
.x(function(d) {return x(d.x); })
.y(function(d) {return y1(d.y1); })
.curve(d3.curveLinear);

//defining the lines
var path = g.append("path")
          .attr("class", "path1")
          .attr("id", "blueLine")
          .attr("d", lineFunction(data))
          .attr("stroke", "blue")
          .attr("stroke-width", 2)
         ...