D3.js: uruchamiać przejście w sposób ciągły?

Question

Jak mogę uruchomić przejście w trybie ciągłym w D3.js?

Załóżmy na przykład, że chcę zmienić kolor body z czerwonego na niebieski iz powrotem, ciągle (nie, to byłoby przerażające, ale zrób z tym).

ten sposób zrobiłbym to raz:

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

Jak to zrobić w sposób ciągły?

Najbliższe przykłady widziałem używać d3.timer, ale nie jestem pewien, czy istnieje lepszy sposób to zrobić.

Answer 1

Można użyć transition.each() i zdarzenia "zakończenie". Kod wyglądałby jak poniżej.

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

Być może chcesz sprawdzić to na blogu (2 części) na przejściach D3 - http://blog.safaribooksonline.com/2013/07/11/reusable-d3-js-using-attrtween-transitions-and-mv/

Dopiero zaczynam pracować z D3 i było to pomocne.

Answer 3

Dla D3 wersji 4 trzeba użyć .Na zamiast .each (na podstawie Lars odpowiedź):

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