Skip to content

Instantly share code, notes, and snippets.

@remysucre

remysucre/index.html

Last active June 27, 2018 18:42
Show Gist options
  • Save remysucre/46d9b9781d9f71a8d2fdec76067cda29 to your computer and use it in GitHub Desktop.
Save remysucre/46d9b9781d9f71a8d2fdec76067cda29 to your computer and use it in GitHub Desktop.
Download ZIP
move
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples of D3 transitions</title>
<style>
svg {
border: 1px solid black;
}
fieldset {
min-width: 0;
width: 50%;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function removeTransitions(){
d3.select("path").transition().attr("d", "M0,0 l50,13 l-25,25 Z").attr("transform", "translate(350, 75)").style("fill", "white");
d3.select("rect").transition().attr("transform", "translate(0)").attr("width", 50).attr("height", 50).style("fill", "white");
d3.select("circle").
transition().attr("transform", "translate(0)").attr("r", 25).style("fill", "white");
}
function runTransitions(){
var pathTransition = d3.select("path").transition();
var rectTransition = d3.select("rect").transition();
var circleTransition = d3.select("circle").transition();
pathTransition.attr("transform", "translate(250, 50)").duration(1000);
rectTransition.attr("transform", "translate(150)").duration(1000);
circleTransition.attr("transform", "translate(150)").duration(1000);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment