d3 to account for missing data in line chart

const src = [{
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 1997,
        "Value": 15.540540540540499
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 1998,
        "Value": 15.540540540540499
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 1999,
        "Value": 22.4489795918367
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2000,
        "Value": 22.972972972973
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2002,
        "Value": 25.3333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2003,
        "Value": 25.3333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2004,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2005,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2006,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2007,
        "Value": 26.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2008,
        "Value": 26.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2009,
        "Value": 27.3333333333333
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2010,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2011,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2012,
        "Value": 24.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2013,
        "Value": 26
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2014,
        "Value": 26
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2015,
        "Value": 26.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2016,
        "Value": 28.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2017,
        "Value": 28.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2018,
        "Value": 28.6666666666667
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2019,
        "Value": 30.463576158940398
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2020,
        "Value": 30.463576158940398
    },
    {
        "Region": "East Asia & Pacific",
        "Name": "Australia",
        "Year": 2021,
        "Value": 31.125827814569501
    }
]

////////////////////////////////////////////////////////////
//////////////////////// 1 CREATE SVG ////////////////////
////////////////////////////////////////////////////////////
const width = 1280;
const height = 720;

const svgns = 'http://www.w3.org/2000/svg'
const svg = d3.select('svg')

svg
//.attr('xmlns', svgns)
    .attr('viewBox', `0 0 ${width} ${height}`)

//---create a rect covering viewBox --- to be deleted later
svg.append('rect')
    .attr('class', 'vBoxRect')
    .attr('width', `${width}`)
    .attr('height', `${height}`)
    .attr('fill', 'none')
    .attr('stroke', 'red')

////////////////////////////////////////////////////////////
//////////////////////// 2 CREATE BOUND ////////////////////
////////////////////////////////////////////////////////////   
const padding = {
    top: 70,
    bottom: 50,
    left: 70,
    right: 190
}

const boundHeight = height - padding.top - padding.bottom;
const boundWidth = width  - padding.right - padding.left;

//create BOUND rect -- to be deleted later
svg.append('rect')
    .attr('class', 'boundRect')
    .attr('x', `${padding.left}`)
    .attr('y', `${padding.top}`)
    .attr('width', `${boundWidth}`)
    .attr('height', `${boundHeight}`)
    .attr('fill', 'none')
    .attr('stroke', 'green')

//create bound element
const bound = svg.append('g')
    .attr('class', 'bound')
    //specify transform, must be .style and not .attr, px needs to be mentioned
    .style('transform', `translate(${padding.left}px,${padding.top}px)`)

////////////////////////////////////////////////////////////
//////////////////////// 3 CREATE SCALE ////////////////////
////////////////////////////////////////////////////////////


const scaleX = d3.scaleLinear()
    .range([0, boundWidth])
    .domain(d3.extent(src, d => d.Year))

const scaleY = d3.scaleLinear()
    .range([boundHeight, 0])
    .domain(d3.extent(src, d => d.Value))

////////////////////////////////////////////////////////////
//////////////////////// 4 CREATE AXIS ////////////////////
////////////////////////////////////////////////////////////    

bound.append('g').attr('class', 'yAxis')
    .append('g').attr('class', 'yAxisDetail')    
    .call(d3.axisLeft(scaleY) ) 

const data2 = src.map(d => d.Year)
const count = [...new Set(data2)].length - 1 
const minYear = Math.min([...src])

bound.append('g')
    .attr('class', 'xAxis')
    .append('g')
    .attr('class', 'xAxisBottom')
    .style('transform', `translateY(${boundHeight}px)`)
    .call(d3.axisBottom(scaleX).ticks(count).tickFormat(d3.format("d")))    

////////////////////////////////////////////////////////////
//////////////////////// 5 CREATE PATH ////////////////////
////////////////////////////////////////////////////////////    
    
    const line = d3.line()   
    .x(d => scaleX(d.Year))
    .y(d => scaleY(d.Value))
    
bound.append('g')
     .attr('class', 'valLine')
     .append('path')
     .attr('d', line(src))
     .attr('stroke', 'black')
     .attr('fill', 'none')

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>

    <div id="container" class="svg-container"></div>
    <svg>
   
</svg>
    

</body>
    <script type="text/javascript">
    </script>

</html>