Question

我从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 + ")");

complete example在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）

svg.selectAll("path")
    .data(data)
  .enter()
    .append("path")
    .attr("d", mkarc)
    .attr("transform", "translate(" + w / 2 + "," + w / 2 + ")");

但这会产生设置属性的“解析问题”。我已经在stackoverflow和其他地方看到了其中一些，但我无法解决根本问题。

这是一个second fiddle，其替代方法不起作用。

修复，以及对其背后原理的一些暗示将非常感激。

Answer 1

这是一个简单的错误 - 之前，你正在调用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);
}

完整演示here。

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

1 个答案: