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.

CodePudding user response：

Given that the line is at 1970 (the start of epoch time), it looks like something is wrong with the how the years are represented in your data. Since you are using a scaleTime, d.year must be a date object. It can't just be an integer representing the year.