Skip to content

Instantly share code, notes, and snippets.

@d3noob
Created November 28, 2019 04:47
Show Gist options
  • Save d3noob/8662d37b212eb473f519fc8f8842e545 to your computer and use it in GitHub Desktop.
Save d3noob/8662d37b212eb473f519fc8f8842e545 to your computer and use it in GitHub Desktop.
Simple transition chaining in v5
license: mit

This is a demonstration of a simple use of transition chaining using d3.js v5.

The circle moves from left to right then increases in radius and then changes colour from blue to red.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 5 of d3.js.

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var svg = d3.select("body") // Select the body element
.append("svg") // Append an SVG element to the body
.attr("width", 960) // make it 960 pixels wide
.attr("height", 500) // make it 500 pixels high
.append("circle") // append a circle to the svg
.style("fill", "blue") // fill the circle with 'blue'
.attr("r", 20) // set the radius to 10 pixels
.attr('cx', 40) // position the circle at 40 on the x axis
.attr('cy', 250) // position the circle at 250 on the y axis
// 1st transition
.transition() // apply a transition
.duration(4000) // apply it over 4000 milliseconds
.attr('cx', 920) // new horizontal position at 920 on x axis
// 2nd transition
.transition() // apply a transition
.duration(4000) // apply it over 4000 milliseconds
.attr('r', 40) // new radius of 40 pixels
// 3rd transition
.transition() // apply a transition
.duration(4000) // apply it over 4000 milliseconds
.style('fill', "red"); // new colour red
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment