d3.js中的「開始」事件是什麼？

Question

我在博斯托克的most recent block注意到他有一個「啓動」事件：

d3.select("body").selectAll("div") 
    .data(d3.range(n)) 
    .enter().append("div") 
    .transition() 
    .delay(function(d, i) { return i + Math.random() * n/4; }) 
    .ease(d3.easeLinear) 
    .on("start", function repeat() { 
     d3.active(this) 
      .styleTween("background-color", function() { return whiteblue; }) 
      .transition() 
      .delay(1000) 
      .styleTween("background-color", function() { return blueorange; }) 
      .transition() 
      .delay(1000) 
      .styleTween("background-color", function() { return orangewhite; }) 
      .transition() 
      .delay(n) 
      .on("start", repeat); 
     }); 

有誰知道這是什麼呢？

它是否等同於加載或在轉換開始的延遲期後被觸發？

Answer 1

該塊寫入d3 v4。它看起來像v3 transition.each已更名爲transition.on（這更有意義）。這就是說start一直是事件型的轉變：

如果指定類型，增加了對過渡事件偵聽器，支持 「開始」，「結束」和「中斷」事件。監聽者將爲 爲每個單獨的元素在過渡中調用。

在調用任何補間之前，在轉換的第一個異步回調 （勾號）期間調用啓動事件。對於具有零延遲的 轉換，這通常在排定 轉換後大約17ms。狀態事件對於觸發每個元素的瞬時更改很有用，例如更改無法插值的屬性 。

爲了回答您的具體問題（我上面的粗體）「或者是在延遲時間之後過渡開始時」 - 是的。

Answer 2

我一直在試圖弄清楚這一點。 「開始」不是正常的DOM事件，也不是D3提供的事件之一。之後做一些研究，這裏就是我來了解一下：

「的轉換是關鍵幀動畫的形式有限，只有兩個關鍵幀：開始和年底」

「開始然後調度事件，並且轉換初始化它的補間，這可能涉及從DOM中檢索起始值並構建內插器。「

來源：https://bost.ocks.org/mike/transition/

（已連結直接從D3過渡回購@https://github.com/d3/d3-transition#active見鏈接「與過渡工作」）。

我相信在示例中使用的D3轉換庫隱式使用相同的 - 也就是說，轉換有兩個關鍵幀。 「開始」「事件」實際上代表第一個關鍵幀。實際上，當轉換開始時會有一些延遲，所以有必要等到關鍵幀「開始」。