This is a demonstration of looping transition chaining using d3.js v4.
The circle moves from left to right and then back again so that it starts and ends in the same state and then we instruct the transition code to repeat itself.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", 960) | |
| .attr("height", 500); | |
| function circleTransition() { | |
| var timeCircle = svg.append("circle") | |
| .attr("fill", "steelblue") | |
| .attr("r", 20); | |
| repeat(); | |
| function repeat() { | |
| timeCircle | |
| .attr('cx', 40) // position the circle at 40 on the x axis | |
| .attr('cy', 250) // position the circle at 250 on the y axis | |
| .transition() // apply a transition | |
| .duration(2000) // apply it over 2000 milliseconds | |
| .attr('cx', 920) // move the circle to 920 on the x axis | |
| .transition() // apply a transition | |
| .duration(2000) // apply it over 2000 milliseconds | |
| .attr('cx', 40) // return the circle to 40 on the x axis | |
| .on("end", repeat); // when the transition finishes start again | |
| }; | |
| }; | |
| circleTransition(); | |
| </script> | |
| </body> |