javascript - 为什么 d3.arc() 给我的是函数而不是路径字符串？

Question

我正在尝试创建一个函数，该函数采用 d3.select() 对象并使用 d3.arc() 方法向其附加圆弧路径。

如果我绘制一个矩形，它将起作用，但是当我使用 d3.arc() 方法尝试它时，调试器/断点显示它返回 arc() 函数而不是路径。

这是代码的精简版本。

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

是因为 arc 本身就是一个函数，与附加 svg 元素不同吗？

Answer 1

“是因为 arc 本身就是一个函数吗？”。是的，电弧发生器是一个函数。因此，您必须调用它:

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