D3.js: einen Übergang kontinuierlich ausführen?

Question

Wie kann ich einen Übergang kontinuierlich in D3.js ausführen?

Zum Beispiel sagen, ich möchte die body Farbe von rot nach blau und wieder zurück, kontinuierlich ändern (ich nicht, das wäre schrecklich, aber geh mit ihm).

Dies ist, wie ich es einmal tun würde:

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

Wie würde ich es ständig tun?

Die nächsten Beispiele, die ich gesehen habe, verwenden d3.timer, aber ich bin mir nicht sicher, ob es einen besseren Weg gibt, es zu tun.

Answer 1

Sie können transition.each() und das "Ende" -Ereignis verwenden. Der Code würde ungefähr wie folgt aussehen.

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

Sie können dieses Blog-Post (2 Teile) auf D3 Übergänge prüfen wollen - http://blog.safaribooksonline.com/2013/07/11/reusable-d3-js-using-attrtween-transitions-and-mv/

Ich bin erst am Anfang hilfreich mit D3 und dies war zu arbeiten.

Answer 3

Für D3 Version 4 Sie haben zu verwenden .on statt .each (basierend auf Lars Antwort):

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(); }); 
     }); 
}