How can I add a curved line to the outer axis of a radial bar chart in d3.js v4?

Question

I'm working on a radial graph in d3.js which has three axes/rings. On the outer axis, instead of having more radial bars, I want to have a curve to show the data smoothly. However, I'm struggling to make it show up. I'm wondering if there is an issue with how I am calling the data or with how the different "paths", the bars and the curves, are interacting with each other. I'm relatively new to d3 and javascript and any advice is welcome!

I tried copy-pasting the existing, working code for the bar graphs and simply changing the .attr("d", d3.arc().....) to .attr("d", d3.lineRadial().....) with the data of interest. I expect to see the curve along the outer radius but nothing shows up. I've played with size and color, just in case it was appearing but was too small to be seen, but that hasn't helped.

Here's an example of the working code for radial bars on the outer axis and some scaling functions:

        var x = d3.scaleBand()
            .range([0, 2 * Math.PI])
            .align(0);
.
.
.
        var y3 = d3.scaleRadial()
            .range([outerRadius/1.2+10, outerRadius])
.
.
.
   

              g.append("g")
                .selectAll("path")
                .data(data)
                .enter()
                .append("path")
                .attr("fill", "#50446a")
                .attr("d", d3.arc()   
                    .innerRadius( function(d) { return y3(0) })
                    .outerRadius( function(d) { return y3(d.soc); }) 
                    .startAngle(function(d) { return x(d.Time); })
                    .endAngle(function(d) { return x(d.Time) + x.bandwidth(); })
                    .padAngle(0.001; } ))
                    .padRadius(innerRadius)) 

and here's the adaptation to make it a curve:

            g.append("g")
                .selectAll("path")
                .data(data)
                .enter()
                .append("path")
                .style("stroke-width", "100")
                .style("stroke", "#ffffff")
                .style("fill", "green")
                .attr("d", d3.lineRadial()
                    .angle(function(d) { return x(d.Time); })
                    .radius(function(d) { return 100*y3(d.soc); })
                    .curve(d3.curveBasis));