Question

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

每次数据更新时，可视化都应该通过转换进行更新，该转换工作正常，但第一次忽略转换。请参阅 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作为饼图布局的值，因此在某些情况下会为startAngle和endAngle返回NaN。我不确定它在视觉上会产生什么影响，但它可能不是你想要的。饼图布局的值访问器应始终返回一个数字，该数字表示该段表示的饼图的比例。在计算段值之前过滤掉得分为0的数据可能会更好，以避免NaN角度。

AngularJS + D3：忽略第一次转换

1 个答案: