d3js過渡步驟功能

Question

我正在使用d3js中的過渡，它工作正常。 但是，每次更新對象位置時，有沒有辦法觸發函數？ （每一步）

這是一些假代碼：

obj.transition()
  .ease('quad')
  .durantion(250)
  .attr('cy', function(d) {
    return d*d;
   });

我知道如果你把每個（類型，fn）你可以從結束和開始得到事件。 但沒有步驟可用。

obj.transition()
  .ease('quad')
  .duration(250)
  .attr('cy', function(d) {
    return d*d;
   })
  .each('start', function(d) { console.log('x'); });

有沒有辦法做到這一點？

Answer 1

從文檔中可以tweens ，每個步驟都會評估tweens 。

當轉換運行時，它的補間被重復調用，其值為0，范圍從0到1.除了延遲和持續時間之外，轉換還可以輕松控制時序。 緩和會扭曲時間，例如慢進和慢進。 一些緩動函數可能暫時給出t大於1或小於0的值; 但是，結束時間始終精確為1，以便在轉換結束時准確設置結束值。 轉換基於其延遲和持續時間的總和而結束。 轉換結束時，在t = 1的最后時間調用補間，然后調度end事件。

所以我想你可以嘗試添加自定義tween函數可能是這樣的：

obj.transition()
 .tween("customTween", function() {
     console.log("This is the tween factory which is called after start event");
     return function(t) {
        console.log("This is the interpolating tween function");
     };})
  .ease("quad") 
  .durantion(250).attr("cy", function(d){
    return d*d;});

但是，由於tweens用於插值，將它們用於其他東西可能是一個壞主意和濫用api。

您是否考慮過使用多階段過渡？ 那將是你添加一個each("end", function() { nextStep(...) })並且nextStep開始一個新的轉換。 然后，您可以縮短單個過渡的持續時間，並在輸入nextStep時執行操作。