Last active
March 30, 2017 06:35
-
-
Save Ryshackleton/3edae1f5a5ed46c946c40947ee893f5a to your computer and use it in GitHub Desktop.
D3 Transition Example - Maptime Seattle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<!-- using D3 version 4--> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<!-- could add CSS inside the <style> tags --> | |
<style> | |
</style> | |
</head> | |
<body> | |
<svg width="400" height="120"> | |
<circle cx="40" cy="60" r="10"></circle> | |
<circle cx="80" cy="60" r="10"></circle> | |
<circle cx="120" cy="60" r="10"></circle> | |
</svg> | |
<script> | |
// use d3 to add a new button in the body | |
d3.select("body") | |
.append("button") | |
.on("click", myFunction) // link the myFunction function to the button click | |
.text("Run My Function"); // add some text to the button | |
function myFunction() { | |
// add your transitioning code here | |
var body = d3.select("body"); // select the html element with <body> | |
var svg = body.select("svg"); // select the <svg> that lies within the <body> | |
var circle = svg.selectAll("circle"); | |
var myData = [ 20, 60, 100 ]; | |
circle = circle.data(myData) | |
.transition() | |
.duration(1500) // all attributes after the .tansition() get transitioned TO | |
.attr("cy", function(d) { | |
return d; | |
}) | |
.style("fill", "darkred") | |
.attr("r", 20) | |
.attr("cy", function(d) { | |
return d; | |
}); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment