AngularJS + D3：忽略第一个转换

Question

我正在使用D3.js进行圆环图可视化。我创建了一个指令myWheel，并在链接函数I $watch上更改<my-wheel>元素的属性val。

每次数据更新时，可视化都应该用一个转换进行更新，该转换很好，但第一次转换被忽略。见this plunker。

如果我延迟（通过$timeout）数据的第一次更新过渡被触发。

问题出在哪里的任何想法？

Answer 1

您有一个selection.each呼叫输入选择donutDataSlice设置this._current作为路径创建的基准。这意味着当您第一次进入arcDataTween时，this._current和a的值相同。所以内插器在第一次通过时不会做任何事情。

还有一些其他问题。在arcDataTween你有这样的：

function arcDataTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
     return arcData(i(t)); 
    }; 
} 

您使用this._current作为插值的初始值，但随后要设置this._current = i(0)。用0调用插补器将返回起始值，所以在每次arcDataTween运行时，您都必须将this._current设置为相同的值。您可能需要的是设置this_current = a（或等同于this._current = i(1)）。

作为关于命名约定的小记录，自定义补间中的第一个参数实际上是通常用d表示的数据。使用a可能会造成混淆，因为第三个参数是元素的当前属性或样式值，通常表示为a（例如function arcDataTween(d, i, a) {}）。

最后，您的初始数据为score为零，并且由于您使用的是score作为饼图布局的值，因此在某些情况下此操作会返回NaN作为startAngle和endAngle。我不确定这有什么影响，但它可能不是你想要的。饼图布局的值存取器应始终返回一个数字，表示该段所表示的饼图的比例。在计算分段值以避免NaN角度之前，最好过滤掉分数为0的数据。