Skip to content

Instantly share code, notes, and snippets.

@alanmclean
Last active September 25, 2022 07:45
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save alanmclean/64c72b2c4a41aafe651d to your computer and use it in GitHub Desktop.
arc tween example
<html>
<body>
<head>
<style type="text/css">
.bg-circle{
fill: #ddd;
stroke: none;
}
.progress-bar{
fill: #000;
stroke: none;
}
.complete{
transition: fill .7s;
fill: orange;
}
</style>
</head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<body>
<script type="text/javascript">
var width = 200,
height = 200,
tau = 2 * Math.PI;
var arc = d3.svg.arc()
.innerRadius(50)
.outerRadius(100)
.startAngle(0);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
// complete
var bg = svg.append("path")
.datum({ endAngle: tau })
.attr('class', 'bg-circle')
.attr("d", arc);
var pctOfGoal = 1
// 50% = .5
var progressArc = svg.append('path')
.datum({ endAngle: 0 * tau })
.attr('d', arc)
.attr('class', 'progress-bar')
.attr('d', arc)
var arcTween = function(transition, newEndAngle){
transition.attrTween('d', function(d){
var interpolate = d3.interpolate(d.endAngle, newEndAngle);
return function(t){
d.endAngle = interpolate(t)
return arc(d)
}
})
}
progressArc
.transition()
.duration(1000)
.call(arcTween, pctOfGoal * tau)
.each('end', function(d){
if(pctOfGoal == 1){
d3.select(this).classed('complete', true)
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment