D3.js: выполнить переход непрерывно?

Question

Как я могу выполнить переход непрерывно в D3.js?

Например, я хочу изменить цвет body с красного на синий и обратно, непрерывно (я не хочу, это было бы ужасно, но идти с ним).

Это, как я хотел бы сделать это один раз:

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

Как бы я это делать постоянно?

Ближайшие примеры, которые я видел, используют d3.timer, но я не уверен, есть ли лучший способ сделать это.

Answer 1

Вы можете использовать transition.each() и событие «конец». Код будет выглядеть примерно так:

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

Вы можете проверить этот блог (2 части) на D3 переходах - http://blog.safaribooksonline.com/2013/07/11/reusable-d3-js-using-attrtween-transitions-and-mv/

Я только начинаю работать с D3 и это было полезно.

Answer 3

Для D3 версии 4 вы должны использовать .он вместо .each (на основе Lars ответа):

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