Skip to content

Instantly share code, notes, and snippets.

@eoiny

eoiny/index.html

Last active August 29, 2015 13:57
Show Gist options
  • Save eoiny/9900122 to your computer and use it in GitHub Desktop.
Save eoiny/9900122 to your computer and use it in GitHub Desktop.
Download ZIP
Transitions1
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Transitions</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var circleData = [
{"cx":"25", "cy":"25", "r":"5"},
{"cx":"50", "cy":"50", "r":"5"},
{"cx":"75", "cy":"75", "r":"5"},
];
d3.select("body").append("svg");
d3.select("svg")
.selectAll("circle")
.data(circleData)
.enter()
.append("circle");
d3.selectAll("circle")
.attr(("cx"),function(d,i){return (i*25)+25;})
.attr(("cy"),function(d,i){return (i*25)+25;})
.attr(("r"),function(d,i){return 5});
function crazyFunction (d,i){
d3.select(this)
.transition().attr("r","25").attr("fill","yellow")
.transition().attr("r","5").attr("fill","black")
.transition().attr("cx","100")
.transition().attr("cy","100")
.transition()
.attr("cx",function(d,i){return d.cx})
.attr("cy",function(d,i){return d.cx})
.attr("fill","blue")
.transition()
.attr("stroke-width", "2")
.attr("stroke", "red")
};
//call function
d3.selectAll("circle").on("mouseover", crazyFunction);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment