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过渡的此博文（2部分） - http://blog.safaribooksonline.com/2013/07/11/reusable-d3-js-using-attrtween-transitions-and-mv/

我刚刚开始使用D3，这很有帮助。

Answer 3

对于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 4

我遇到了同样的问题，并使用 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>

D3.js：连续过渡？

4 个答案: