live graph axis ticks number not the same after data range changed

Question

I would like yaxis ticks number always keep the same. which means if y domain is [0, 100], then each ticks show every 10 units, if y domain changed to [0,10], then each ticks show every 1 units.

When amplifier jump from 20 to 10, no y ticks anymore! I would like still show 10 ticks!

function init() {
    var width = 600//window.innerWidth;
    var height = 400//window.innerHeight;
    var margin = {top:10,left:40,bottom:60,right:10}
    
    var xScale = d3.scaleLinear()
    .range([0, width])
    .domain([0,num]);
    var yScale = d3.scaleLinear()
    .range([height, 0])
    .domain([0,d3.max(indata,d => d)])
    
    var xAxis = d3.axisBottom(xScale)
    //.tickSizeInner(-h + 40)
    .tickSizeOuter(0)
    .tickPadding(10)
    
    var yAxis = d3.axisLeft(yScale)
    //.tickSizeInner(-w + 40)
    .tickSizeOuter(0)
    .tickPadding(10)
        .ticks(10)
    
    d3.select('body')
    .style('background','#000')
    .style('margin',0)
    .style('padding',0)
    .style('font','10px sans-serif')

    var svg = d3.select('body')
    .append('svg')
    .attr('width',width+margin.left+margin.right)
    .attr('height',height+margin.top+margin.bottom)

    g = svg.append('g')
    .attr('transform',`translate(${margin.left}, ${margin.left})`);
    var xaxis = g.append('g')
    .attr('class', 'xaxis')
    .attr('transform', `translate(0, ${height})`)
    .call(xAxis)

    var yaxis = g.append('g')
    .attr('class', 'yaxis')
    .call(yAxis)

    var arr =[xaxis,yaxis]
    arr.forEach(d => {
    d.selectAll('text')
        .attr('fill','green')

    d.selectAll('path')
        .attr('fill','none')
        .attr('stroke','white')
        .attr('stroke-width',2)
        .attr('shape-rendering','crispEdges')
    
    d.selectAll('line')
        .attr('fill','none')
        .attr('stroke','white')//'#333'
        .attr('stroke-width',2)
        .attr('shape-rendering','crispEdges')   
    })

    var hgrid = g.selectAll(".hgrid")//horizontal grid lines
    .data([...yScale.ticks(),yScale.domain()[1]]).enter()
    .append("line").attr("class","hgrid")
    .attr("x1",0)
    .attr("x2",width)
    .attr("y1",function(d){return yScale(d);})
    .attr("y2",function(d){return yScale(d);})
    .attr('stroke','grey')
    .attr('stroke-width',.8)
    .attr('shape-rendering','crispEdges')
    
    var vgrid = g.selectAll(".vgrid")//horizontal grid lines
    .data([...xScale.ticks(),xScale.domain()[1]]).enter()
    .append("line").attr("class","vgrid")
    .attr("x1",function(d){return xScale(d);})
    .attr("x2",function(d){return xScale(d);})
    .attr("y1",0)
    .attr("y2",height)    
    .attr('stroke','grey')
    .attr('stroke-width',.8)
    .attr('shape-rendering','crispEdges')
        
    var legend = g.append('g')
    .attr('transform', `translate(20, 20)`)
    .selectAll('g')
    .data([['Value', '#fff']])
    .enter()
    .append('g');
    legend
    .append('circle')
    .attr('fill', d => d[1])
    .attr('r', 5)
    .attr('cx', 0)
    .attr('cy', (d, i) => i * 15);
    legend
    .append('text')
    .text(d => d[0])
    .attr('transform', (d, i) => `translate(10, ${i * 15 + 4})`);

    d3.selectAll('text')
    .attr('fill','#fff')
    return [g,xScale,yScale,xAxis,yAxis]
}

function feedData(elem) {
    indata.shift()
    indata.push(elem)
}

var base = 0
function render(svg,xScale,yScale) {
    var line = d3.line()
    .x((d, i) => {
        return xScale(i)
    })
    .y(d => yScale(d))

    svg.selectAll('.line')
    //.datum(indata)
    .data([indata])
    .join('path')
        .attr('class', 'line')
        .attr('d',line)
    .attr('fill','none')
    .attr('stroke','#fff')
    .attr('stroke-width',2)

    yScale.domain(d3.extent(indata));

    svg.selectAll(".xaxis")
        .call(xAxis)
    svg.selectAll(".yaxis")
        .call(yAxis)
    base += 1
}

var num = 100;
var amp = 10
var indata = [...Array(num).fill(0)]
indata = [...Array(num).keys()]

var [svg,xScale,yScale,xAxis,yAxis] = init()

var i = 0
setInterval(() => {
    i += 1
    if (i%(num*2) == 0) {
    if (amp == 10) {
        amp = 20
    }else{
        amp = 10
    }
    }
    var elem = Math.random()*amp
    feedData(elem);
    render(svg,xScale,yScale,xAxis,yAxis);
}, 100);

    <script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>