AngularJS + D3:忽略第一个转换
我正在使用D3.js进行圆环图可视化。我创建了一个指令myWheel
,并在链接函数I $watch
上更改<my-wheel>
元素的属性val
。AngularJS + D3:忽略第一个转换
每次数据更新时,可视化都应该用一个转换进行更新,该转换很好,但第一次转换被忽略。见this plunker。
如果我延迟(通过$timeout
)数据的第一次更新过渡被触发。
问题出在哪里的任何想法?
您有一个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的数据。
''this._current'和'a'之间进行插值时,谢谢Scott。我已更新[http://plnkr.co/edit/cDz6DLdVbX1QChb5r5kM?p=preview](plunker)。即使我在第一次迭代中有'NaN'角度,但视觉效果看起来还不错,但我想避免这种情况,所以现在我过滤出0分的数据。但是,我无法让图表在'.enter ()',尽管我调整了'this._current'值以允许'arcDataTween'在两个不同的值之间进行插值。任何想法来解决这个问题? – swenedo
您需要小心缓存interpolateObject的返回值,因为它实际上为每个调用使用相同的基础对象。以下是一个包含更多详细信息的错误报告:https://github.com/mbostock/d3/issues/1030。这有帮助吗? –
我怀疑问题出在'arcDataTween'函数中。当试图在'd3.interpolate(this._current,a);' – swenedo