D3.js: eseguire una transizione continuamente?

Question

Come posso eseguire una transizione continuamente in D3.js?

Ad esempio, diciamo che voglio cambiare il colore body da rosso a blu e viceversa, continuamente (non lo faccio, sarebbe orrendo, ma andiamo con esso).

Questo è come vorrei farlo una volta:

d3.select("body").transition().duration(1000).style("background-color", "red"); 

Come potrei farlo in continuazione?

Gli esempi più vicini che ho visto utilizzano d3.timer, ma non sono sicuro che ci sia un modo migliore per farlo.

Answer 1

È possibile utilizzare transition.each() e l'evento "fine". Il codice sarebbe simile al seguente.

function myTrans() { 
    d3.select("body").transition().duration(1000).style("background-color", "red") 
     .each("end", function() { 
     d3.select(this).transition().duration(1000).style("background-color", "blue") 
      .each("end", function() { myTrans(); }); 
     }); 
} 

Answer 2

Si potrebbe voler controllare questo post del blog (2 parti) sulle transizioni D3 - http://blog.safaribooksonline.com/2013/07/11/reusable-d3-js-using-attrtween-transitions-and-mv/

Sto solo cominciando a lavorare con D3 e questo è stato utile.

Answer 3

Per D3 versione 4 è necessario utilizzare .on invece di .each (sulla base di Lars risposta):

function myTrans() { 
    d3.select("body").transition().duration(1000).style("background-color", "red") 
     .on("end", function() { 
     d3.select(this).transition().duration(1000).style("background-color", "blue") 
      .on("end", function() { myTrans(); }); 
     }); 
}