Javascript D3:Attrween不工作

我正在基于这个例子在D3V3中创建一个sunburst。我无法理解为什么attrTween（）在以下情况下不起作用

path.transition()
  .duration(750)
  .attrTween("d", function(d) {
    var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
        yd = d3.interpolate(y.domain(), [d.y, 1]),
        yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
    return function(d, i) {
      var p = i
          ? function(t) { return arc(d); }
          : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
      return p
    };
  })

单击任意圆弧时，我遇到以下错误

错误：属性d:应为moveto路径命令（'M'或'M'），“函数（t）{x..”

但是，如下定义一个函数

arcTween（）

，并像这样调用

.attrTween（“d”，arcTween（d））

，效果很好

function arcTween(d) {
  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, 1]),
      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
  return function(d, i) {
    return i
        ? function(t) { return arc(d); }
        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t));return arc(d); };
 };
}

---

工作代码使用函数声明定义

函数arcTween（d）{}

。在

中使用此函数。attrTween（“d”，arcTween（d））

将实际执行从封闭函数

单击（d）传入参数
d
的函数

，它是绑定到用户单击的元素的数据。此调用用于捕获/关闭插值器

xd

、

yd

和

yr

中的值

d

，这些值依次用于返回的内部函数。此返回函数由

attrTween（）执行

返回用于转换的插值器

在代码中，在尝试内联函数声明时，您错过了对外部函数的上述调用。因此，由于函数嵌套太深，您最终得到的返回值无效

但是，有一种简单的方法可以让代码正常工作：只需在内联函数之后添加一个

（d）

，就像前面的代码一样执行它

function click(d) {             // This d is what needs to be captured

  path.transition()
    .duration(750)
    .attrTween("d", function(d) {
      // var...                // This is where the outer d is closed over/captured
      return function(d, i) {  // This is another d not to be confused with the outer one
        // ...
      };
    }(d))                      // This will execute the function passing in click's d

}

看一看更新后的工作演示