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的數據。