D3轉換 - 暫停和恢復

Question

我想了解D334轉換從這個guide'暫停'和'恢復'。雖然我明白'暫停'是如何工作的，但當談到'簡歷'時，我很失落。我無法理解作者的解釋，特別是'線性'或首先恢復解釋。我的問題是e.attr("T",0);和.attr("T",1);究竟做了什麼？

我應聘簡歷功能，播放頭在這裏的視頻或波形例如：jsfiddle

Answer 1

代碼e.attr("T",0)和.attr("T",1)集所選擇的節點屬性。即，創建並設置新的屬性「T」。這樣做的目的純粹是爲了便於停止和恢復 - 0代表開始前的過渡，1代表結束。

如果該屬性包含在轉換中，則該值將從0逐漸變爲1.正如本教程的作者指出的那樣，可以使用它來獲取任何時間點的轉換狀態 - 你只需要查詢「T」的值。如果您保存特定的轉​​換，則可以使用該值在任何時候暫停和恢復。

請注意，沒有什麼特別的「T」。您可以使用任何（未使用的）屬性名稱。目的只是爲了說明過渡進展的程度。

Answer 2

我一直在努力解決這個確切的問題，我認爲這個例子有一個錯字，一直在拋棄我。當作者寫道：

var e = d3.select("#time"); 
e.attr("T",0); 

c.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

它好像e將更新其T屬性爲c的轉變，這是沒有意義的。相反，我認爲它應該是如下：

var e = d3.select("#time"); 
e.attr("T",0); 

e.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

現在我們選擇#time元素，設置其T屬性0的初始值，然後添加到接管的過程中改變T到1相同元素的過渡指定的持續時間。