script src d3js org d3 v7 min js script script var dataset apples 5345 2879 1997 2437 4045 var width 460 height 300 radius Math min width height 2 var color d3 scaleOrdinal range d3 schemeSet3 var pie d3 pie sort null var arc d3 arc innerRadius radius 100 outerRadius radius 50 var svg d3 select body append svg attr width width attr height height append g attr transform translate width 2 height 2 var path svg selectAll path data pie dataset apples enter append path attr fill function d i return color i attr d arc transition duration 1000 attrTween d function d var i d3 interpolate d endAngle d startAngle return function t d startAngle i t return arc d script style body min height 600px style form label input type radio name dataset value apples checked Apples label label input type radio name dataset value oranges Oranges label form script src d3js org d3 v7 min js script script var dataset apples 53245 28479 19697 24037 40245 oranges 200 200 200 previously 5 values now only 4 var width 460 height 300 radius Math min width height 2 var enterAntiClockwise startAngle Math PI 2 endAngle Math PI 2 var color d3 scaleOrdinal range d3 schemeSet3 var pie d3 pie sort null var arc d3 arc innerRadius radius 100 outerRadius radius 20 var svg d3 select body append svg attr width width attr height height append g attr transform translate width 2 height 2 var path svg selectAll path data pie dataset apples enter append path attr fill function d i return color i attr d arc each function d this _current d store the initial values d3 selectAll input on change change function change path path data pie dataset this value update the data set the start and end angles to Math PI 2 so we can transition anticlockwise to the actual values later path enter append path attr fill function d i return color i attr d arc enterAntiClockwise each function d i console log i data d value this _current data d data value d value startAngle enterAntiClockwise startAngle endAngle enterAntiClockwise endAngle store the initial values path exit transition duration 750 attrTween d arcTweenOut remove now remove the exiting arcs var path2 svg selectAll path data pie dataset this value path2 transition duration 750 attrTween d arcTween redraw the arcs path2 exit transition duration 750 attrTween d arcTweenOut remove now remove the exiting arcs Store the displayed angles in _current Then interpolate from _current to the new angles During the transition _current is updated in place by d3 interpolate function arcTween a var i d3 interpolate this _current a this _current i 0 return function t return arc i t Interpolate exiting arcs start and end angles to Math PI 2 so that they exit at the end of the data function arcTweenOut a var i d3 interpolate this _current startAngle Math PI 2 endAngle Math PI 2 value 0 this _current i 0 return function t return arc i t script
h data pie dataset apples enter append path attr fill function d i return color i attr d arc each function d this _current d store the initial values d3 selectAll input on change change function change path path data pie dataset this value update the data set the start and end angles to Math PI 2 so we can transition anticlockwise to the actual values later path enter append path attr fill function d i return color i attr d arc enterAntiClockwise each function d i console log i data d value this _current data d data value d value startAngle enterAntiClockwise startAngle endAngle enterAntiClockwise endAngle store the initial values path exit transition duration 750 attrTween d arcTweenOut remove now remove the exiting arcs var path2 svg selectAll path data pie dataset this value path2 transition duration 750 attrTween d arcTween redraw the arcs path2 exit transition duration 750 attrTween d arcTweenOut remove now remove the exiting arcs Store the displayed angles in _current Then interpolate from _current to the new angles During the transition _current is updated in place by d3 interpolate function arcTween a var i d3 interpolate this _current a this _current i 0 return function t return arc i t Interpolate exiting arcs start and end angles to Math PI 2 so that they exit at the end of the data function arcTweenOut a var i d3 interpolate this _current startAngle Math PI 2 endAngle Math PI 2 value 0 this _current i 0 return function t return arc i t script