Skip to content

Instantly share code, notes, and snippets.

@pbogden

pbogden/README.md

Last active January 3, 2016 18:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbogden/7031977 to your computer and use it in GitHub Desktop.
Save pbogden/7031977 to your computer and use it in GitHub Desktop.
Download ZIP
transition demo
Raw
README.md

simple transition demo

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Transition</title>
<style>
.label {
fill: #444;
font: sans-serif;
font-size: 30px;
font-weight: 300;
text-anchor: middle;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<body>
<script>
var width = 960,
height = 500;
// Eliminate default margin from <body> element
document.body.style.margin="0px";
var svg = d3.select("body").append("svg")
.attr("width", width + "px")
.attr("height", height + "px");
svg.append("circle")
.style("fill", "red")
.attr("cx", 200)
.attr("cy", 200)
.attr("r", 100)
.transition() // Start transition to medium black
.duration(1000)
.ease("linear")
.attr("r", 50)
.style("fill", "black")
.transition() // Start transition to nothing
.duration(1000)
.attr("r", 0);
svg.append("text")
.attr("class", "label")
.attr("transform", "translate(300,300)")
.text("start")
.transition()
.delay(1000)
.text("done");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment