[Solved]-d3 to account for missing data in line chart-d3.js

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": 2001,
    "Value": null
  },
  {
    "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))
  .defined(d => 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>