D3.js：连续运行转换？

如何在D3.js中连续运行转换

例如，假设我想连续地将

车身

颜色从红色改为蓝色，然后再改回来（我不想，那太可怕了，但还是这样做吧）

我会这样做一次：

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

我将如何持续地这样做

我见过的最接近的例子使用了d3.timer，但我不确定是否有更好的方法

您可以使用和“结束”事件。代码如下所示

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

---

对于D3版本4，您必须使用.on而不是.each（基于LAR答案）：

---

我也面临同样的问题，我用css动画来解决这个问题。对于简单的html和css，如下所示：

#立方体{
宽度：120px；
高度：120px；
动画持续时间：3s；
动画名称：transcolor；
动画迭代次数：无限；
动画方向：交替；
}
@关键帧转换颜色{
从{
背景色：#535455；
}
到{
背景色：#bf2c23；
}
}

太好了，谢谢。虽然我有点担心它最终可能会使浏览器崩溃-它会逐渐占用越来越多的内存吗？@Richard这是一个递归函数（正如它自己调用的那样），所以它应该抛出一个关于堆栈大小超过某个阈值的错误。@它递归但异步调用自己，所以它永远不会抛出调用堆栈大小错误。

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