Skip to content

Instantly share code, notes, and snippets.

@jonahx
Created March 1, 2013 00:40
Show Gist options
  • Save jonahx/5061490 to your computer and use it in GitHub Desktop.
Save jonahx/5061490 to your computer and use it in GitHub Desktop.
arc path test
{"description":"arc path test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
var svg = d3.select("svg")//.width(600).height(600)
var pi = Math.PI;
var arcData = d3.svg.arc()
.innerRadius(37)
.outerRadius(52)
.startAngle(0) //converting from degs to radians
.endAngle(function(t) {return t}) //just radians
function arcTween(b) {
var i = d3.interpolate(0, b);
return function(t) {
return arcData(i(t));
};
}
svg.append("path")
.data([3])
.attr("transform", "translate(200,200)")
.transition()
.duration(3000)
.attrTween("d", arcTween)
circle {
fill: none;
stroke: #1FB41F;
stroke-width: 2;
opacity: 0.4
}
path {
fill: none;
stroke: #1FB41F;
stroke-width: 2;
opacity: 0.3
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment