D3 area function not running

having some trouble with d3

I'm currently writing a function to generate a stream graph however I cant seem to get the thing to return a path for my data.

function streamGraph(){

        var selection = svg
            .select("g")
            .selectAll(".stream")
            .data(dataset);

        var base = {};
        keyField(dataset[0]).forEach(k => base[k] = 0);

        keyField(dataset[0]).forEach(key => {
            var streamArea = d3.area()
                .x(d => {console.log("hi?"); xScale(dataField(d))})
                .y0(d => yScale(base[key]))
                .y1(d => {console.log("hi"); base[key] = d[key]; return yScale(d[key])})
                .curve(d3.curveBasis);
            selection
                .enter()
                .append("path")
                .style("id", "key--" + key)
                .attr("d", streamArea)
                .attr("fill", fillScale(dataField))
        })

    }

neither logs seem to be printed. However, after checking the HTML the path has the fill attribute with a colour (albeit the wrong one). I have also tried .attr("d", d => streamArea(d)) However, this too failed to yeild a result.

Any help is much appreciated, Thank you.