d3.js：我可以在函数中封装弧定义吗？

我从d3.js开始，我有一个简单的例子，用4个圆弧构造一个圆

d3代码的关键部分生成如下弧：

var data = [ "#003399", "#0099CC", "#0099FF", "#0000FF"];
...
svg.selectAll("path")
    .data(data)
  .enter()
    .append("path")
    .attr("d", d3.svg.arc()
        .innerRadius(rd*3)
        .outerRadius(rd*4)
        .startAngle(function(d,i) { return i*ad; })
        .endAngle(function(d,i) { return (i+1)*ad; }))
    .attr("fill", function(d, i) { return d; })
    .attr("transform", "translate(" + w/2 +"," + w/2 + ")");

这是在JSFiddle上

现在我想把d3.svg.arc（）调用放在一个函数中，因为我想生成更多的节），所以它看起来像这样：

var mkarc = function (d, i) {
    return d3.svg.arc()
    .innerRadius(rd * 3)
    .outerRadius(rd * 4)
    .startAngle(i * ad)
    .endAngle((i + 1) * ad);
}

然后attr（“d”，d3.svg.arc（）…）变成attr（“d”，mkarc）

但这会在设置属性时产生“解析问题”。我在stackoverflow和其他地方看到过一些这样的问题，但我还不能解决根本问题

这里有一个替代方法不起作用的例子

修复，以及一些关于它们背后的原理的提示，我们将不胜感激。

这是一个简单的错误——以前，您调用的是

d3.svg.arc（）

返回的函数，现在调用的是返回函数

d3.svg.arc（）

。也就是说，将未计算的函数返回到

mkarc

。您只需将所做的电弧发生器应用于

d

参数即可：

var mkarc = function (d, i) {
  return d3.svg.arc()
    .innerRadius(rd * 3)
    .outerRadius(rd * 4)
    .startAngle(i * ad)
    .endAngle((i + 1) * ad)(d);
}

---

完成演示。

谢谢，效果不错！我为自己感到骄傲，因为我只记得我可以从函数返回一个函数。这让我想起了用两级和三级间接寻址来保持跟踪指针的一点尝试。

var mkarc = function (d, i) {
  return d3.svg.arc()
    .innerRadius(rd * 3)
    .outerRadius(rd * 4)
    .startAngle(i * ad)
    .endAngle((i + 1) * ad)(d);
}