5

D3.js でトランジションを継続的に実行するにはどうすればよいですか?

たとえば、body色を赤から青に変更したり、連続的に元に戻したりしたいとします (私はそうしません。それは恐ろしいことですが、それに従ってください)。

これは私が一度それを行う方法です：

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

どうすれば継続的に行うことができますか？

私が見た最も近い例は を使用d3.timerしていますが、それを行うためのより良い方法があるかどうかはわかりません。

4

3 に答える 3

5

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(); });
      });
}
于 2013-06-15T21:01:58.127 に答える
1

私は同じ問題に直面し、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>

于 2018-10-08T15:44:42.580 に答える