I am trying to implement a line chart through this function. when I try to add the path, the path alone is not getting displayed. any help would be appreciated. (last 10 lines of the code add the path to the graph)

function drawLineChart(country) {
  console.log(countryValueMap[country])
   var margin = {top: 60, right: 110, bottom: 50, left: 50},
    width = 800 - margin.left - margin.right + 50,
    height = 500 - margin.top - margin.bottom + 50;
    // document.getElementById("my_dataviz").innerHTML = "";
    const lineSvg = d3.select("#linechart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

    const x = d3.scaleTime()
  .range([0 , width])
  .domain([new Date(1958,0,1), new Date(2011,0,1)])

lineSvg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(x).ticks(5).tickFormat(d => d.getFullYear()))

const y = d3.scaleLinear()
  .domain([0,countryMaxValueMap[country]])
  .range([height, 0])
lineSvg.append("g")
  .call(d3.axisRight(y).tickSize(width)).call(g => g.select(".domain")
        .remove())
    .call(g => g.selectAll(".tick:not(:first-of-type) line")
        .attr("stroke-opacity", 0.5)
        .attr("stroke-dasharray", "2,2"))
    .call(g => g.selectAll(".tick text")
        .attr("x", 4)
        .attr("dy", -4));


    lineSvg.append("path")
      .datum(countryValueMap[country])
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.year) })
        .y(function(d) { return y(d.gdp) })
        )
}

When I try to execute the above code, this is the output I am getting.

I tried logging the value of d3.year and d3.gdp and the variable works fine.