D3.js Uncaught TypeError: m.selectAll is not a function

Question

I'm trying to create the following graph, the axes are plotted correctly.

But when I try to draw the line, the following error appears Uncaught TypeError: m.selectAll is not a function.

I've already researched a lot, tried several "solutions", but nothing worked.

function drawPowerProfileChart(xAxis, data) {

    const width = window.innerWidth;

    if (window.innerHeight < 600) {
        var height = window.innerHeight - 150;
    } else if (window.innerHeight >= 600 && window.innerHeight < 767) {
        var height = window.innerHeight - 500;
    } else if (window.innerHeight >= 767 && window.innerHeight < 916) {
        var height = window.innerHeight - 200;
    } else if (window.innerHeight >= 916 && window.innerHeight < 1180) {
        var height = window.innerHeight - 650;
    } else if (window.innerHeight >= 1180 && window.innerHeight < 1440) {
        var height = window.innerHeight - 750;
    } else {
        var height = window.innerHeight;
    }

    const marginRight = 20;
    const marginBottom = 20;
    const marginLeft = 40;

    const svg = d3.select("#power-profile-chart")
        .append("svg")
        .attr("viewBox", [0, 0, width, height])
        .attr("style", "max-width: 100%; height: auto;");

    const yAxisScale = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .range([height - marginBottom, 0]);
    
    const y = d3.axisLeft()
        .scale(yAxisScale);

    const xAxisScale = d3.scaleSymlog()
        .domain(d3.extent(data, d => d.interval))
        .constant(5)
        .range([1, width - marginLeft - marginRight]);
    
    const x = d3.axisBottom()
        .scale(xAxisScale)
        .tickValues(xAxis.map(function(i) { 
            return i.interval;
        }))
        .tickFormat(function(l) {
            var label = xAxis.find(function(i) {
                return i.interval === l; 
            });

            return label ? label.label : l;
        });

    svg.append("g")
        .attr("transform", `translate(${marginLeft},${height - marginBottom})`)
        .call(x);
    
    svg.append("g")
        .attr("transform", `translate(${marginLeft},0)`)
        .call(y);
    
    const line = d3.line()
        .x(d => x(d.interval))
        .y(d => y(d.value));

    svg.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1.5)
        .attr("d", line);

    return svg.node();
}

Basic, the same code here:

Example