D3 Examples - D3.selectAll(...).transition() Explained

D3.selectAll(...).transition() Explained

I hope this sequel will help you to understand how a d3-transition works, specifically when it is applied on multiple elements.

The main objective of this sequel is to illustrate that:

selectAll(...).transition() defines several transitions

each transition runs independantly

This sequel also illustrates:

the use of transition().delay(...), transition().duration()

the lifecycle of a transition (scheduled/starting/running/ending/stopped)

This sequel uses D3 v3.5.5.

If you look at the code, you will see that:

I use named transition in order to run several transition on the same element

I stop running transitions by overriding the adequate named transitions

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>D3.selectAll(...).transition() Explained</title>
  <meta content="Explaining D3.selectAll(...).transition() behaviour" name="description">
  </head>
<body>
  <link rel="stylesheet" href="d3_selectAll_transition_explained.css">
​
  <div class='top-container'>
     <form action="">
      <input type="radio" name="step" onclick="_goToStage(this.value)" value=0 checked><span class="comment">start</span><br>
      <input type="radio" name="step" onclick="_goToStage(this.value)" value=1><span class="space-2">d3.selectAll("circle")</span><br>
      <input type="radio" name="step" onclick="_goToStage(this.value)" value=2><span class="space-4">.transition()</span><br>
      <input type="radio" name="step" style="visibility:hidden"><span class="space-6">.attr("delay", func(d,i){return 1000*i})</span><br>
      <input type="radio" name="step" style="visibility:hidden"><span class="space-6">.attr("duration", func(d,i){return 1000*(i+1)})</span><br>
      <input type="radio" name="step" style="visibility:hidden"><span class="space-6">.attr("cy", func(d,i){return 30*(i+1)})</span><br>
      <input type="radio" name="step" onclick="_goToStage(this.value)" value=3><span class="comment">end</span>
    </form>
    <div class="explanation-area">&nbsp;</div>
  </div>
  <hr/>
​
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="d3_selectAll_transition_explained.js"></script>
</body>
    