Skip to content

Instantly share code, notes, and snippets.

Last active January 31, 2018 06:36
What would you like to do?
Looping a transition in v4

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">
<!-- load the d3.js library -->
<script src=""></script>
var svg ="body")
.attr("width", 960)
.attr("height", 500);
function circleTransition() {
var timeCircle = svg.append("circle")
.attr("fill", "steelblue")
.attr("r", 20);
function repeat() {
.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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment