d3.js - 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

对于 D3 版本 4，您必须使用 .on 而不是 .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(); });
      });
}

Answer 3

我遇到了同样的问题，我使用css 动画来解决这个问题。使用简单的 html 和 css 会是这样的：

#cube {
  width: 120px; 
  height:120px;
  animation-duration: 3s;
  animation-name: transcolor;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  }


@keyframes transcolor {
  from {
    background-color:#535455;
  }
  
  to {
   background-color:#bf2c23;
  }
}

<div id="cube">

</div>

使用 d3 和 javascript ：

d3.select("body")
  .style("animation", "transcolor 3s infinite linear alternate");

@keyframes transcolor {
  from {
    background-color:#535455;
  }
  
  to {
   background-color:#bf2c23;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>