Why is d3.arc() giving me the function instead of the path string?

I am trying to create a function that takes a d3.select() object and appends an arc path to it using the d3.arc() method.

It will work if I draw a rectangle but when I try it with the d3.arc() method, the debugger/breakpoint shows that it returns the arc() function instead of the path.

Here’s a stripped down version of the code.

let render_rect = function(ct){  // rectangle drawing function
     ct.append("rect")
            .attr("x", 29)
            .attr("y", 18)
            .attr("width", 76)
            .attr("height", 11)
            .attr("fill", "#A00");
};
    
    
let render_toi_arc = function(ct){ // arc drawing function
    ct.append("g")
        .append("path")
        .attr("d", function(d){
            return d3.arc()
                .innerRadius(d.toi)
                .outerRadius(d.toi+5)
                .startAngle(0)
                .endAngle(Math.PI/2);
        })
};

let toi_arcs = svg.selectAll("g.toi")
    .data(toi)
    .join("g")
    .each(function(t){
        current_toi = d3.select(this);

        render_toi_arc(current_toi);   // nope. doesn't work
        render_rect(current_toi);      // works
    });

Is it because arc is a function itself unlike appending an svg element?

Answer

“Is it because arc is a function itself?”. Yes, the arc generator is a function. Therefore, you have to call it:

let render_toi_arc = function(ct){ // arc drawing function
    ct.append("g")
        .append("path")
        .attr("d", function(d){
            return d3.arc()
                .innerRadius(d.toi)
                .outerRadius(d.toi+5)
                .startAngle(0)
                .endAngle(Math.PI/2)();
        //parentheses here----------^
        })
};