Skip to content

Instantly share code, notes, and snippets.

@zikes
Forked from mbostock/.block
Last active Aug 29, 2015
Embed
What would you like to do?
Arc Tween Animation
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
body {
width: 900px;
padding-top:25px;
margin:auto;
background:#333;
}
path {
fill: #eee;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 900,
height = 900,
radius = Math.min(width, height) / 2;
var arcs = [];
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
for(var i = 0; i < width/10/2; i++) {
arcs[i] = d3.svg.arc()
.innerRadius(radius-(10*i))
.outerRadius(radius-(10*i)-5)
.startAngle(-.25*2*Math.PI)
.endAngle(-.25*2*Math.PI);
svg.append("path").datum(i)
.attr("d", arcs[i])
}
function selectArcs() {
d3.selectAll("path")
.each(arcTween);
}
function arcTween(i){
var self=this,
duration=1500,
delay=100;
setInterval(function(){
d3.select(self)
.transition().delay(delay*i).duration(duration)
.attrTween("d", tweenArcBack)
.transition().duration(duration)
.attrTween("d", tweenArc);
},2*duration);
}
function tweenArc(b) {
var i = d3.interpolate(.25*2*Math.PI, -.25*2*Math.PI);
return function(t) {
return arcs[b].endAngle(i(t))();
};
}
function tweenArcBack(b) {
var i = d3.interpolate(-.25*2*Math.PI, .25*2*Math.PI);
return function(t) {
return arcs[b].endAngle(i(t))();
};
}
selectArcs();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment