Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active February 9, 2016 01:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbostock/1401b7a1459f2ffa975e to your computer and use it in GitHub Desktop.
Save mbostock/1401b7a1459f2ffa975e to your computer and use it in GitHub Desktop.
Download ZIP
Rounded Arc Test
Raw
.block
license: gpl-3.0
Raw
README.md

A test of rounded (and padded) arcs rendered to Canvas using d3-shape.

Raw
d3.min.js
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define("d3-ease",["exports"],i):i(t.d3_ease={})}(this,function(t){"use strict";function i(t,i){return function(n){return t(n,i)}}function n(t,i,n){return function(s){return t(s,i,n)}}function s(t,i){return i=O.call(i),i[0]=null,function(n){return i[0]=n,t.apply(null,i)}}function e(t,e,h){switch(arguments.length){case 1:return t;case 2:return i(t,e);case 3:return n(t,e,h);default:return s(t,arguments)}}function h(t){return+t}function o(t){return t*t}function _(t){return t*(2-t)}function a(t){return((t*=2)<=1?t*t:--t*(2-t)+1)/2}function r(t){return t*t*t}function u(t){return--t*t*t+1}function c(t){return((t*=2)<=1?t*t*t:(t-=2)*t*t+2)/2}function l(t,i){return null==i&&(i=3),Math.pow(t,i)}function f(t,i){return null==i&&(i=3),1-Math.pow(1-t,i)}function x(t,i){return null==i&&(i=3),((t*=2)<=1?Math.pow(t,i):2-Math.pow(2-t,i))/2}function p(t){return 1-Math.cos(t*C)}function y(t){return Math.sin(t*C)}function d(t){return(1-Math.cos(R*t))/2}function m(t){return Math.pow(2,10*t-10)}function M(t){return 1-Math.pow(2,-10*t)}function v(t){return((t*=2)<=1?Math.pow(2,10*t-10):2-Math.pow(2,10-10*t))/2}function g(t){return 1-Math.sqrt(1-t*t)}function b(t){return Math.sqrt(1- --t*t)}function T(t){return((t*=2)<=1?1-Math.sqrt(1-t*t):Math.sqrt(1-(t-=2)*t)+1)/2}function w(t){return 1-k(1-t)}function k(t){return z>t?V*t*t:j>t?V*(t-=F)*t+D:Z>t?V*(t-=L)*t+B:V*(t-=Q)*t+U}function N(t){return((t*=2)<=1?1-k(1-t):k(t-1)+1)/2}function E(t,i){return i=null==i?1.70158:+i,t*t*((i+1)*t-i)}function q(t,i){return i=null==i?1.70158:+i,--t*t*((i+1)*t+i)+1}function S(t,i){return i=null==i?1.70158:+i,((t*=2)<1?t*t*((i+1)*t-i):(t-=2)*t*((i+1)*t+i)+2)/2}function P(t,i,n){return i=null==i?1:Math.max(1,i),n=(null==n?.3:n)/G,i*Math.pow(2,10*--t)*Math.sin((n*Math.asin(1/i)-t)/n)}function A(t,i,n){return i=null==i?1:Math.max(1,i),n=(null==n?.3:n)/G,1-i*Math.pow(2,-10*t)*Math.sin((+t+n*Math.asin(1/i))/n)}function I(t,i,n){i=null==i?1:Math.max(1,i),n=(null==n?.3:n)/G;var s=n*Math.asin(1/i);return((t=2*t-1)<0?i*Math.pow(2,10*t)*Math.sin((s-t)/n):2-i*Math.pow(2,-10*t)*Math.sin((s+t)/n))/2}var O=Array.prototype.slice,R=Math.PI,C=R/2,z=4/11,F=6/11,j=8/11,D=.75,L=9/11,Z=10/11,B=.9375,Q=21/22,U=63/64,V=1/z/z,G=2*Math.PI,H="0.3.0";t.version=H,t.bind=e,t.linear=h,t.linearIn=h,t.linearOut=h,t.linearInOut=h,t.quad=o,t.quadIn=o,t.quadOut=_,t.quadInOut=a,t.cubic=r,t.cubicIn=r,t.cubicOut=u,t.cubicInOut=c,t.poly=l,t.polyIn=l,t.polyOut=f,t.polyInOut=x,t.sin=p,t.sinIn=p,t.sinOut=y,t.sinInOut=d,t.exp=m,t.expIn=m,t.expOut=M,t.expInOut=v,t.circle=g,t.circleIn=g,t.circleOut=b,t.circleInOut=T,t.bounce=w,t.bounceIn=w,t.bounceOut=k,t.bounceInOut=N,t.back=E,t.backIn=E,t.backOut=q,t.backInOut=S,t.elastic=P,t.elasticIn=P,t.elasticOut=A,t.elasticInOut=I}),function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define("d3-path",["exports"],i):i(t.d3_path={})}(this,function(t){"use strict";function i(){this._x0=this._y0=this._x1=this._y1=null,this._=[]}function n(){return new i}var s=Math.PI,e=2*s,h=1e-6,o=e-h;i.prototype=n.prototype={moveTo:function(t,i){this._.push("M",this._x0=this._x1=+t,",",this._y0=this._y1=+i)},closePath:function(){null!==this._x1&&(this._x1=this._x0,this._y1=this._y0,this._.push("Z"))},lineTo:function(t,i){this._.push("L",this._x1=+t,",",this._y1=+i)},quadraticCurveTo:function(t,i,n,s){this._.push("Q",+t,",",+i,",",this._x1=+n,",",this._y1=+s)},bezierCurveTo:function(t,i,n,s,e,h){this._.push("C",+t,",",+i,",",+n,",",+s,",",this._x1=+e,",",this._y1=+h)},arcTo:function(t,i,n,e,o){t=+t,i=+i,n=+n,e=+e,o=+o;var _=this._x1,a=this._y1,r=n-t,u=e-i,c=_-t,l=a-i,f=c*c+l*l;if(0>o)throw new Error("negative radius: "+o);if(null===this._x1)this._.push("M",this._x1=t,",",this._y1=i);else if(f>h)if(Math.abs(l*r-u*c)>h&&o){var x=n-_,p=e-a,y=r*r+u*u,d=x*x+p*p,m=Math.sqrt(y),M=Math.sqrt(f),v=o*Math.tan((s-Math.acos((y+f-d)/(2*m*M)))/2),g=v/M,b=v/m;Math.abs(g-1)>h&&this._.push("L",t+g*c,",",i+g*l),this._.push("A",o,",",o,",0,0,",+(l*x>c*p),",",this._x1=t+b*r,",",this._y1=i+b*u)}else this._.push("L",this._x1=t,",",this._y1=i);else;},arc:function(t,i,n,_,a,r){t=+t,i=+i,n=+n;var u=n*Math.cos(_),c=n*Math.sin(_),l=t+u,f=i+c,x=1^r,p=r?_-a:a-_;if(0>n)throw new Error("negative radius: "+n);null===this._x1?this._.push("M",l,",",f):(Math.abs(this._x1-l)>h||Math.abs(this._y1-f)>h)&&this._.push("L",l,",",f),n&&(p>o?this._.push("A",n,",",n,",0,1,",x,",",t-u,",",i-c,"A",n,",",n,",0,1,",x,",",this._x1=l,",",this._y1=f):(0>p&&(p=p%e+e),this._.push("A",n,",",n,",0,",+(p>=s),",",x,",",this._x1=t+n*Math.cos(a),",",this._y1=i+n*Math.sin(a))))},rect:function(t,i,n,s){this._.push("M",this._x0=this._x1=+t,",",this._y0=this._y1=+i,"h",+n,"v",+s,"h",-n,"Z")},toString:function(){return this._.join("")}};var _="0.1.2";t.version=_,t.path=n}),function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("d3-path")):"function"==typeof define&&define.amd?define("d3-shape",["exports","d3-path"],i):i(t.d3_shape={},t.d3_path)}(this,function(t,i){"use strict";function n(t){return function(){return t}}function s(t){return t.innerRadius}function e(t){return t.outerRadius}function h(t){return t.startAngle}function o(t){return t.endAngle}function _(t){return t&&t.padAngle}function a(t){return t>=1?ut:-1>=t?-ut:Math.asin(t)}function r(t,i,n,s,e,h,o,_){var a=n-t,r=s-i,u=o-e,c=_-h,l=(u*(i-h)-c*(t-e))/(c*a-u*r);return[t+l*a,i+l*r]}function u(t,i,n,s,e,h,o){var _=t-n,a=i-s,r=(o?h:-h)/Math.sqrt(_*_+a*a),u=r*a,c=-r*_,l=t+u,f=i+c,x=n+u,p=s+c,y=(l+x)/2,d=(f+p)/2,m=x-l,M=p-f,v=m*m+M*M,g=e-h,b=l*p-x*f,T=(0>M?-1:1)*Math.sqrt(Math.max(0,g*g*v-b*b)),w=(b*M-m*T)/v,k=(-b*m-M*T)/v,N=(b*M+m*T)/v,E=(-b*m+M*T)/v,q=w-y,S=k-d,P=N-y,A=E-d;return q*q+S*S>P*P+A*A&&(w=N,k=E),{cx:w,cy:k,x01:-u,y01:-c,x11:w*(e/g-1),y11:k*(e/g-1)}}function c(){function t(){var t,n,s=+c.apply(this,arguments),e=+l.apply(this,arguments),h=p.apply(this,arguments)-ut,o=y.apply(this,arguments)-ut,_=Math.abs(o-h),M=o>h;if(m||(m=t=i.path()),s>e&&(n=e,e=s,s=n),e>0)if(_>=ct)m.moveTo(e*Math.cos(h),e*Math.sin(h)),m.arc(0,0,e,h,o,!M),s>0&&(m.moveTo(s*Math.cos(o),s*Math.sin(o)),m.arc(0,0,s,o,h,M));else{var v=h,g=o,b=h,T=o,w=_,k=_,N=d.apply(this,arguments)/2,E=N>0&&(x?+x.apply(this,arguments):Math.sqrt(s*s+e*e)),q=Math.min(Math.abs(e-s)/2,+f.apply(this,arguments)),S=q,P=q;if(E>0){var A=a(E/s*Math.sin(N)),I=a(E/e*Math.sin(N));(w-=2*A)>0?(A*=M?1:-1,b+=A,T-=A):(w=0,b=T=(h+o)/2),(k-=2*I)>0?(I*=M?1:-1,v+=I,g-=I):(k=0,v=g=(h+o)/2)}var O=e*Math.cos(v),R=e*Math.sin(v),C=s*Math.cos(T),z=s*Math.sin(T);if(q>0){var F=e*Math.cos(g),j=e*Math.sin(g),D=s*Math.cos(b),L=s*Math.sin(b);if(rt>_){var Z=w>0?r(O,R,D,L,F,j,C,z):[C,z],B=O-Z[0],Q=R-Z[1],U=F-Z[0],V=j-Z[1],G=1/Math.sin(Math.acos((B*U+Q*V)/(Math.sqrt(B*B+Q*Q)*Math.sqrt(U*U+V*V)))/2),H=Math.sqrt(Z[0]*Z[0]+Z[1]*Z[1]);S=Math.min(q,(s-H)/(G-1)),P=Math.min(q,(e-H)/(G+1))}}if(k>0)if(P>0){var J=u(D,L,O,R,e,P,M),K=u(F,j,C,z,e,P,M);m.moveTo(J.cx+J.x01,J.cy+J.y01),q>P?m.arc(J.cx,J.cy,P,Math.atan2(J.y01,J.x01),Math.atan2(K.y01,K.x01),!M):(m.arc(J.cx,J.cy,P,Math.atan2(J.y01,J.x01),Math.atan2(J.y11,J.x11),!M),m.arc(0,0,e,Math.atan2(J.cy+J.y11,J.cx+J.x11),Math.atan2(K.cy+K.y11,K.cx+K.x11),!M),m.arc(K.cx,K.cy,P,Math.atan2(K.y11,K.x11),Math.atan2(K.y01,K.x01),!M))}else m.moveTo(O,R),m.arc(0,0,e,v,g,!M);else m.moveTo(O,R);if(s>0&&w>0)if(S>0){var J=u(C,z,F,j,s,-S,M),K=u(O,R,D,L,s,-S,M);m.lineTo(J.cx+J.x01,J.cy+J.y01),q>S?m.arc(J.cx,J.cy,S,Math.atan2(J.y01,J.x01),Math.atan2(K.y01,K.x01),!M):(m.arc(J.cx,J.cy,S,Math.atan2(J.y01,J.x01),Math.atan2(J.y11,J.x11),!M),m.arc(0,0,s,Math.atan2(J.cy+J.y11,J.cx+J.x11),Math.atan2(K.cy+K.y11,K.cx+K.x11),M),m.arc(K.cx,K.cy,S,Math.atan2(K.y11,K.x11),Math.atan2(K.y01,K.x01),!M))}else m.arc(0,0,s,T,b,M);else m.lineTo(C,z)}else m.moveTo(0,0);return m.closePath(),t?(m=null,t+""||null):void 0}var c=s,l=e,f=n(0),x=null,p=h,y=o,d=_,m=null,M=null;return t.centroid=function(){var t=(+c.apply(this,arguments)+ +l.apply(this,arguments))/2,i=(+p.apply(this,arguments)+ +y.apply(this,arguments))/2-rt/2;return[Math.cos(i)*t,Math.sin(i)*t]},t.innerRadius=function(i){return arguments.length?(c="function"==typeof i?i:n(+i),t):c},t.outerRadius=function(i){return arguments.length?(l="function"==typeof i?i:n(+i),t):l},t.cornerRadius=function(i){return arguments.length?(f="function"==typeof i?i:n(+i),t):f},t.padRadius=function(i){return arguments.length?(x=null==i?null:"function"==typeof i?i:n(+i),t):x},t.startAngle=function(i){return arguments.length?(p="function"==typeof i?i:n(+i),t):p},t.endAngle=function(i){return arguments.length?(y="function"==typeof i?i:n(+i),t):y},t.padAngle=function(i){return arguments.length?(d="function"==typeof i?i:n(+i),t):d},t.context=function(i){return arguments.length?(m=M=null==i?null:i,t):m},t}function l(t,i){return i=lt.call(i),i[0]=null,function(n){return i[0]=n,t.apply(null,i)}}function f(t){return new x(t)}function x(t){this._context=t}function p(t){return t[0]}function y(t){return t[1]}function d(){function t(t){var n,c,l,f,x,p=t.length,y=!1,d=new Array(p),m=new Array(p);for(a||(u=r(x=i.path())),n=0;p>=n;++n){if(!(p>n&&_(f=t[n],n,t))===y)if(y=!y)c=n,u.areaStart(),u.lineStart();else{for(u.lineEnd(),u.lineStart(),l=n-1;l>=c;--l)u.point(d[l],m[l]);u.lineEnd(),u.areaEnd()}y&&(d[n]=+s(f,n,t),m[n]=+h(f,n,t),u.point(e?+e(f,n,t):d[n],o?+o(f,n,t):m[n]))}return x?(u=null,x+""||null):void 0}var s=p,e=null,h=n(0),o=y,_=n(!0),a=null,r=f,u=null;return t.x=function(i){return arguments.length?t.x0(i).x1(null):s},t.x0=function(i){return arguments.length?(s="function"==typeof i?i:n(+i),t):s},t.x1=function(i){return arguments.length?(e=null==i?null:"function"==typeof i?i:n(+i),t):e},t.y=function(i){return arguments.length?t.y0(i).y1(null):h},t.y0=function(i){return arguments.length?(h="function"==typeof i?i:n(+i),t):h},t.y1=function(i){return arguments.length?(o=null==i?null:"function"==typeof i?i:n(+i),t):o},t.defined=function(i){return arguments.length?(_="function"==typeof i?i:n(!!i),t):_},t.curve=function(i){var n=arguments.length;return n?(r=n>1?l(i,arguments):i,null!=a&&(u=r(a)),t):r},t.context=function(i){return arguments.length?(null==i?a=u=null:u=r(a=i),t):a},t}function m(t,i,n){t._context.bezierCurveTo((2*t._x0+t._x1)/3,(2*t._y0+t._y1)/3,(t._x0+2*t._x1)/3,(t._y0+2*t._y1)/3,(t._x0+4*t._x1+i)/6,(t._y0+4*t._y1+n)/6)}function M(t){return new v(t)}function v(t){this._context=t}function g(t){return new b(t)}function b(t){this._context=t}function T(t){return new w(t)}function w(t){this._context=t}function k(t,i){return null==i||1===(i=+i)?M(t):new N(t,i)}function N(t,i){this._basis=M(t),this._beta=i}function E(t,i,n){t._context.bezierCurveTo(t._x1+t._k*(t._x2-t._x0),t._y1+t._k*(t._y2-t._y0),t._x2+t._k*(t._x1-i),t._y2+t._k*(t._y1-n),t._x2,t._y2)}function q(t,i){return new S(t,(null==i?1:1-i)/6)}function S(t,i){this._context=t,this._k=i}function P(t,i){return new A(t,(null==i?1:1-i)/6)}function A(t,i){this._context=t,this._k=i}function I(t,i){return new O(t,(null==i?1:1-i)/6)}function O(t,i){this._context=t,this._k=i}function R(t,i,n){var s=t._x1,e=t._y1,h=t._x2,o=t._y2;if(t._l01_a>ft){var _=2*t._l01_2a+3*t._l01_a*t._l12_a+t._l12_2a,a=3*t._l01_a*(t._l01_a+t._l12_a);s=(s*_-t._x0*t._l12_2a+t._x2*t._l01_2a)/a,e=(e*_-t._y0*t._l12_2a+t._y2*t._l01_2a)/a}if(t._l23_a>ft){var r=2*t._l23_2a+3*t._l23_a*t._l12_a+t._l12_2a,u=3*t._l23_a*(t._l23_a+t._l12_a);h=(h*r+t._x1*t._l23_2a-i*t._l12_2a)/u,o=(o*r+t._y1*t._l23_2a-n*t._l12_2a)/u}t._context.bezierCurveTo(s,e,h,o,t._x2,t._y2)}function C(t,i){return(i=null==i?.5:+i)?new z(t,i):q(t,0)}function z(t,i){this._context=t,this._alpha=i}function F(t,i){return(i=null==i?.5:+i)?new j(t,i):P(t,0)}function j(t,i){this._context=t,this._alpha=i}function D(t,i){return(i=null==i?.5:+i)?new L(t,i):I(t,0)}function L(t,i){this._context=t,this._alpha=i}function Z(t){return new B(t)}function B(t){this._context=t}function Q(){function t(t){var n,r,u,c=t.length,l=!1;for(o||(a=_(u=i.path())),n=0;c>=n;++n)!(c>n&&h(r=t[n],n,t))===l&&((l=!l)?a.lineStart():a.lineEnd()),l&&a.point(+s(r,n,t),+e(r,n,t));return u?(a=null,u+""||null):void 0}var s=p,e=y,h=n(!0),o=null,_=f,a=null;return t.x=function(i){return arguments.length?(s="function"==typeof i?i:n(+i),t):s},t.y=function(i){return arguments.length?(e="function"==typeof i?i:n(+i),t):e},t.defined=function(i){return arguments.length?(h="function"==typeof i?i:n(!!i),t):h},t.curve=function(i){var n=arguments.length;return n?(_=n>1?l(i,arguments):i,null!=o&&(a=_(o)),t):_},t.context=function(i){return arguments.length?(null==i?o=a=null:a=_(o=i),t):o},t}function U(t){return 0>t?-1:1}function V(t,i,n){var s=t._x1-t._x0,e=i-t._x1,h=(t._y1-t._y0)/s,o=(n-t._y1)/e,_=(h*e+o*s)/(s+e);return(U(h)+U(o))*Math.min(Math.abs(h),Math.abs(o),.5*Math.abs(_))||0}function G(t,i){var n=t._x1-t._x0;return n?(3*(t._y1-t._y0)/n-i)/2:i}function H(t,i,n){var s=t._x0,e=t._y0,h=t._x1,o=t._y1,_=(h-s)/3;t._context.bezierCurveTo(s+_,e+_*i,h-_,o-_*n,h,o)}function J(t){return new K(t)}function K(t){this._context=t}function W(t){return new X(t)}function X(t){this._context=t}function Y(t){var i,n,s=t.length-1,e=new Array(s),h=new Array(s),o=new Array(s);for(e[0]=0,h[0]=2,o[0]=t[0]+2*t[1],i=1;s-1>i;++i)e[i]=1,h[i]=4,o[i]=4*t[i]+2*t[i+1];for(e[s-1]=2,h[s-1]=7,o[s-1]=8*t[s-1]+t[s],i=1;s>i;++i)n=e[i]/h[i-1],h[i]-=n,o[i]-=n*o[i-1];for(e[s-1]=o[s-1]/h[s-1],i=s-2;i>=0;--i)e[i]=(o[i]-e[i+1])/h[i];for(h[s-1]=(t[s]+e[s-1])/2,i=0;s-1>i;++i)h[i]=2*t[i+1]-e[i+1];return[e,h]}function $(t){return t}function tt(t,i){return t>i?-1:i>t?1:i>=t?0:NaN}function it(){function t(t){for(var n,a,r=t.length,u=0,c=new Array(r),l=new Array(r),f=+h.apply(this,arguments),x=Math.min(Mt,Math.max(-Mt,o.apply(this,arguments)-f)),p=Math.min(Math.abs(x)/r,_.apply(this,arguments)),y=p*(0>x?-1:1),d=0;r>d;++d)(a=l[c[d]=d]=+i(t[d],d,t))>0&&(u+=a);null!=s?c.sort(function(t,i){return s(l[t],l[i])}):null!==e&&c.sort(function(i,n){return e(t[i],t[n])});for(var m,d=0,M=u?(x-r*y)/u:0;r>d;++d,f=n)m=c[d],a=l[m],n=f+(a>0?a*M:0)+y,l[m]={data:t[m],value:a,startAngle:f,endAngle:n,padAngle:p};return l}var i=$,s=tt,e=null,h=n(0),o=n(Mt),_=n(0);return t.value=function(s){return arguments.length?(i="function"==typeof s?s:n(+s),t):i},t.sortValues=function(i){return arguments.length?(s=i,e=null,t):s},t.sort=function(i){return arguments.length?(e=i,s=null,t):e},t.startAngle=function(i){return arguments.length?(h="function"==typeof i?i:n(+i),t):h},t.endAngle=function(i){return arguments.length?(o="function"==typeof i?i:n(+i),t):o},t.padAngle=function(i){return arguments.length?(_="function"==typeof i?i:n(+i),t):_},t}function nt(t){return new st(t)}function st(t){this._context=t}function et(t){return new ht(t)}function ht(t){this._context=t}function ot(t){return new _t(t)}function _t(t){this._context=t}function at(){function t(){var t;return h||(h=t=i.path()),s.apply(this,arguments).draw(h,+e.apply(this,arguments)),t?(h=null,t+""||null):void 0}var s=n(xt),e=n(64),h=null;return t.type=function(i){return arguments.length?(s="function"==typeof i?i:n(i),t):s},t.size=function(i){return arguments.length?(e="function"==typeof i?i:n(+i),t):e},t.context=function(i){return arguments.length?(h=null==i?null:i,t):h},t}var rt=Math.PI,ut=rt/2,ct=2*rt,lt=Array.prototype.slice;x.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;default:this._context.lineTo(t,i)}}},v.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._y0=this._y1=NaN,this._point=0},lineEnd:function(){switch(this._point){case 3:m(this,this._x1,this._y1);case 2:this._context.lineTo(this._x1,this._y1)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;break;case 2:this._point=3,this._context.lineTo((5*this._x0+this._x1)/6,(5*this._y0+this._y1)/6);default:m(this,t,i)}this._x0=this._x1,this._x1=t,this._y0=this._y1,this._y1=i}},b.prototype={lineStart:function(){this._x0=this._x1=this._x2=this._x3=this._x4=this._y0=this._y1=this._y2=this._y3=this._y4=NaN,this._point=0},lineEnd:function(){switch(this._point){case 1:this._context.moveTo(this._x2,this._y2),this._context.closePath();break;case 2:this._context.moveTo((this._x2+2*this._x3)/3,(this._y2+2*this._y3)/3),this._context.lineTo((this._x3+2*this._x2)/3,(this._y3+2*this._y2)/3),this._context.closePath();break;case 3:this.point(this._x2,this._y2),this.point(this._x3,this._y3),this.point(this._x4,this._y4)}},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._x2=t,this._y2=i;break;case 1:this._point=2,this._x3=t,this._y3=i;break;case 2:this._point=3,this._x4=t,this._y4=i,this._context.moveTo((this._x0+4*this._x1+t)/6,(this._y0+4*this._y1+i)/6);break;default:m(this,t,i)}this._x0=this._x1,this._x1=t,this._y0=this._y1,this._y1=i}},w.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._y0=this._y1=NaN,this._point=0},lineEnd:function(){(this._line||0!==this._line&&3===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1;break;case 1:this._point=2;break;case 2:this._point=3;var n=(this._x0+4*this._x1+t)/6,s=(this._y0+4*this._y1+i)/6;this._line?this._context.lineTo(n,s):this._context.moveTo(n,s);break;case 3:this._point=4;default:m(this,t,i)}this._x0=this._x1,this._x1=t,this._y0=this._y1,this._y1=i}},N.prototype={lineStart:function(){this._x=[],this._y=[],this._basis.lineStart()},lineEnd:function(){var t=this._x,i=this._y,n=t.length-1;if(n>0)for(var s,e=t[0],h=i[0],o=t[n]-e,_=i[n]-h,a=-1;++a<=n;)s=a/n,this._basis.point(this._beta*t[a]+(1-this._beta)*(e+s*o),this._beta*i[a]+(1-this._beta)*(h+s*_));this._x=this._y=null,this._basis.lineEnd()},point:function(t,i){this._x.push(+t),this._y.push(+i)}},S.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x2,this._y2);break;case 3:E(this,this._x1,this._y1)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2,this._x1=t,this._y1=i;break;case 2:this._point=3;default:E(this,t,i)}this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=i}},A.prototype={lineStart:function(){this._x0=this._x1=this._x2=this._x3=this._x4=this._x5=this._y0=this._y1=this._y2=this._y3=this._y4=this._y5=NaN,this._point=0},lineEnd:function(){switch(this._point){case 1:this._context.moveTo(this._x3,this._y3),this._context.closePath();break;case 2:this._context.lineTo(this._x3,this._y3),this._context.closePath();break;case 3:this.point(this._x3,this._y3),this.point(this._x4,this._y4),this.point(this._x5,this._y5)}},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._x3=t,this._y3=i;break;case 1:this._point=2,this._context.moveTo(this._x4=t,this._y4=i);break;case 2:this._point=3,this._x5=t,this._y5=i;break;default:E(this,t,i)}this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=i}},O.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._point=0},lineEnd:function(){(this._line||0!==this._line&&3===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1;break;case 1:this._point=2;break;case 2:this._point=3,this._line?this._context.lineTo(this._x2,this._y2):this._context.moveTo(this._x2,this._y2);break;case 3:this._point=4;default:E(this,t,i)}this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=i}};var ft=1e-6;z.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._l01_a=this._l12_a=this._l23_a=this._l01_2a=this._l12_2a=this._l23_2a=this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x2,this._y2);break;case 3:this.point(this,this._x2,this._y2)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){if(t=+t,i=+i,this._point){var n=this._x2-t,s=this._y2-i;this._l23_a=Math.sqrt(this._l23_2a=Math.pow(n*n+s*s,this._alpha))}switch(this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;break;case 2:this._point=3;default:R(this,t,i)}this._l01_a=this._l12_a,this._l12_a=this._l23_a,this._l01_2a=this._l12_2a,this._l12_2a=this._l23_2a,this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=i}},j.prototype={lineStart:function(){this._x0=this._x1=this._x2=this._x3=this._x4=this._x5=this._y0=this._y1=this._y2=this._y3=this._y4=this._y5=NaN,this._l01_a=this._l12_a=this._l23_a=this._l01_2a=this._l12_2a=this._l23_2a=this._point=0},lineEnd:function(){switch(this._point){case 1:this._context.moveTo(this._x3,this._y3),this._context.closePath();break;case 2:this._context.lineTo(this._x3,this._y3),this._context.closePath();break;case 3:this.point(this._x3,this._y3),this.point(this._x4,this._y4),this.point(this._x5,this._y5)}},point:function(t,i){if(t=+t,i=+i,this._point){var n=this._x2-t,s=this._y2-i;this._l23_a=Math.sqrt(this._l23_2a=Math.pow(n*n+s*s,this._alpha))}switch(this._point){case 0:this._point=1,this._x3=t,this._y3=i;break;case 1:this._point=2,this._context.moveTo(this._x4=t,this._y4=i);break;case 2:this._point=3,this._x5=t,this._y5=i;break;default:R(this,t,i)}this._l01_a=this._l12_a,this._l12_a=this._l23_a,this._l01_2a=this._l12_2a,this._l12_2a=this._l23_2a,this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=i}},L.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._l01_a=this._l12_a=this._l23_a=this._l01_2a=this._l12_2a=this._l23_2a=this._point=0},lineEnd:function(){(this._line||0!==this._line&&3===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){if(t=+t,i=+i,this._point){var n=this._x2-t,s=this._y2-i;this._l23_a=Math.sqrt(this._l23_2a=Math.pow(n*n+s*s,this._alpha))}switch(this._point){case 0:this._point=1;break;case 1:this._point=2;break;case 2:this._point=3,this._line?this._context.lineTo(this._x2,this._y2):this._context.moveTo(this._x2,this._y2);break;case 3:this._point=4;default:R(this,t,i)}this._l01_a=this._l12_a,this._l12_a=this._l23_a,this._l01_2a=this._l12_2a,this._l12_2a=this._l23_2a,this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=i}};var xt={draw:function(t,i){var n=Math.sqrt(i/Math.PI);t.moveTo(n,0),t.arc(0,0,n,0,2*Math.PI)}},pt={draw:function(t,i){var n=Math.sqrt(i/5)/2;t.moveTo(-3*n,-n),t.lineTo(-n,-n),t.lineTo(-n,-3*n),t.lineTo(n,-3*n),t.lineTo(n,-n),t.lineTo(3*n,-n),t.lineTo(3*n,n),t.lineTo(n,n),t.lineTo(n,3*n),t.lineTo(-n,3*n),t.lineTo(-n,n),t.lineTo(-3*n,n),t.closePath()}},yt=Math.sqrt(1/3),dt=2*yt,mt={draw:function(t,i){var n=Math.sqrt(i/dt),s=n*yt;t.moveTo(0,-n),t.lineTo(s,0),t.lineTo(0,n),t.lineTo(-s,0),t.closePath()}};B.prototype={lineStart:function(){this._point=0},lineEnd:function(){this._point&&this._context.closePath()},point:function(t,i){t=+t,i=+i,this._point?this._context.lineTo(t,i):(this._point=1,this._context.moveTo(t,i))}},K.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._y0=this._y1=this._t0=NaN,this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x1,this._y1);break;case 3:H(this,this._t0,G(this,this._t0))}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){var n=NaN;if(t=+t,i=+i,t!==this._x1||i!==this._y1){switch(this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;break;case 2:this._point=3,H(this,G(this,n=V(this,t,i)),n);break;default:H(this,this._t0,n=V(this,t,i))}this._x0=this._x1,this._x1=t,this._y0=this._y1,this._y1=i,this._t0=n}}},X.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x=[],this._y=[]},lineEnd:function(){var t=this._x,i=this._y,n=t.length;if(n)if(this._line?this._context.lineTo(t[0],i[0]):this._context.moveTo(t[0],i[0]),2===n)this._context.lineTo(t[1],i[1]);else for(var s=Y(t),e=Y(i),h=0,o=1;n>o;++h,++o)this._context.bezierCurveTo(s[0][h],e[0][h],s[1][h],e[1][h],t[o],i[o]);(this._line||0!==this._line&&1===n)&&this._context.closePath(),this._line=1-this._line,this._x=this._y=null},point:function(t,i){this._x.push(+t),this._y.push(+i)}};var Mt=2*Math.PI,vt={draw:function(t,i){var n=Math.sqrt(i),s=-n/2;t.rect(s,s,n,n)}};st.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._y=NaN,this._point=0},lineEnd:function(){(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;default:this._context.lineTo(t,this._y),this._context.lineTo(t,i)}this._y=i}},ht.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x=NaN,this._point=0},lineEnd:function(){(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;default:this._context.lineTo(this._x,i),this._context.lineTo(t,i)}this._x=t}},_t.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x=this._y=NaN,this._point=0},lineEnd:function(){2===this._point&&this._context.lineTo(this._x,this._y),(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,i){switch(t=+t,i=+i,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,i):this._context.moveTo(t,i);break;case 1:this._point=2;default:var n=(this._x+t)/2;this._context.lineTo(n,this._y),this._context.lineTo(n,i)}this._x=t,this._y=i}};var gt=Math.sqrt(3),bt={draw:function(t,i){var n=Math.sqrt(i/gt),s=n*gt/2;t.moveTo(0,s),t.lineTo(n,-s),t.lineTo(-n,-s),t.closePath()}},Tt={draw:function(t,i){var n=Math.sqrt(i/gt),s=n*gt/2;t.moveTo(0,-s),t.lineTo(n,s),t.lineTo(-n,s),t.closePath()}},wt=[xt,pt,mt,vt,bt,Tt],kt="0.0.3";t.version=kt,t.arc=c,t.area=d,t.basisClosed=g,t.basisOpen=T,t.basis=M,t.bundle=k,t.cardinalClosed=P,t.cardinalOpen=I,t.cardinal=q,t.catmullRomClosed=F,t.catmullRomOpen=D,t.catmullRom=C,t.circle=xt,t.cross=pt,t.diamond=mt,t.linearClosed=Z,t.linear=f,t.line=Q,t.monotone=J,t.natural=W,t.pie=it,t.square=vt,t.stepAfter=nt,t.stepBefore=et,t.step=ot,t.symbol=at,t.symbols=wt,t.triangleDown=bt,t.triangleUp=Tt}),function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define("d3-timer",["exports"],i):i(t.d3_timer={})}(this,function(t){"use strict";function i(t,i,n){this.id=++u,this.restart(t,i,n)}function n(t,n,s){return new i(t,n,s)}function s(t){t=null==t?Date.now():+t,++a;try{for(var i,n=o;n;)t>=n.time&&(i=n.callback)(t-n.time,t),n=n.next}finally{--a}}function e(){a=r=0;try{s()}finally{for(var t,i=o,n=1/0;i;)i.callback?(n>i.time&&(n=i.time),i=(t=i).next):i=t?t.next=i.next:o=i.next;_=t,h(n)}}function h(t){if(!a){r&&(r=clearTimeout(r));var i=t-Date.now();i>24?1/0>t&&(r=setTimeout(e,i)):(a=1,l(e))}}var o,_,a=0,r=0,u=0,c={},l="undefined"!=typeof window&&(window.requestAnimationFrame||window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(t){return setTimeout(t,17)};i.prototype=n.prototype={restart:function(t,i,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?Date.now():+n)+(null==i?0:+i);var s=this.id,e=c[s];e?(e.callback=t,e.time=n):(e={next:null,callback:t,time:n},_?_.next=e:o=e,c[s]=_=e),h()},stop:function(){var t=this.id,i=c[t];i&&(i.callback=null,i.time=1/0,delete c[t],h())}};var f="0.0.6";t.version=f,t.timer=n,t.timerFlush=s});
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="d3.min.js"></script>
<script>
var data = [1, 1, 2, 3, 5, 8, 13, 21];
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var width = canvas.width,
height = canvas.height,
outerRadius = height / 2 - 30,
innerRadius = outerRadius / 3;
var arc = d3_shape.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.context(context);
var pie = d3_shape.pie()
.padAngle(0.03);
var ease = d3_ease.cubicInOut,
duration = 2500;
d3_timer.timer(function(elapsed) {
var t = ease(1 - Math.abs((elapsed % duration) / duration - 0.5) * 2),
arcs = pie(data);
context.save();
context.clearRect(0, 0, width, height);
context.translate(width / 2, height / 2);
context.beginPath();
arcs.forEach(arc.cornerRadius(0));
context.lineWidth = 1;
context.strokeStyle = "#777";
context.stroke();
context.beginPath();
arcs.forEach(arc.cornerRadius((outerRadius - innerRadius) / 2 * t));
context.fillStyle = "#ccc";
context.fill();
context.lineWidth = 1.5;
context.lineJoin = "round";
context.strokeStyle = "#000";
context.stroke();
context.restore();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment