Estoy tratando de implementar un gráfico de líneas a través de esta función. cuando trato de agregar la ruta, la ruta sola no se muestra. Cualquier ayuda sería apreciada. (las últimas 10 líneas del código agregan la ruta al gráfico)

 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) }) ) }

Cuando intento ejecutar el código anterior, este es el resultado que obtengo.

Intenté registrar el valor de d3.year y d3.gdp y la variable funciona bien.