Question

我根据示例here在d3 v3中创建了一个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 path命令（＆＃39; M＆＃39;或＆＃39; m＆＃39;），＆＃34; function（t）{x ...＆＃34;。

但是，定义一个函数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); };
 };
}

Answer 1

工作代码使用函数声明来定义Get-ChildItem *_*.dxf | ForEach-Object { Rename-Item $_.Name ($_.Name -replace '_','-') }。在function arcTween(d) { }中使用此函数实际上将执行该函数从封闭函数.attrTween("d", arcTween(d))传入参数d，该函数是绑定到用户单击元素的数据。此调用用于捕获/关闭插值器click(d)，d和xd中的值yd，后者又用于返回的内部函数。返回的函数是由yr执行以返回用于转换的插值器的函数。

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

然而，有一个简单的方法可以让您的代码工作：只需在内联函数之后添加.attrTween()即可执行它，就像以前的代码一样。

(d)

查看更新的Plunk以了解正常工作的演示。

D3：attrTween不工作

1 个答案: