Demonstrates a simple arc transition Details Chart is encapsulated i e easily imported into projects Helper method which is called to set new value 0 to 100 style body min height 400px style script type text javascript src https d3js org d3 v7 min js script script let initChart function let width 148 let height 148 let radius Math min width height 2 let color d3 scaleLinear domain 1 100 range blue red let angle 0 5 Math PI var oldvalue 20 var newvalue 20 let backgroundArc d3 arc innerRadius 58 outerRadius radius cornerRadius 20 startAngle angle 1 endAngle angle let mainArcA d3 arc innerRadius 58 outerRadius radius cornerRadius 20 let mainArc mainArcA startAngle angle 1 endAngle function d return d 100 angle let svg d3 select body append svg attr width width attr height height let charts svg selectAll g data oldvalue enter append g attr transform function return translate width 2 height 2 let legend svg selectAll legend data oldvalue enter append g attr class legend attr transform function return translate 21 21 let textholder legend append text textholder attr x 22 attr y 12 attr text anchor middle attr transform translate width 2 height 2 text function d return d charts append path attr d backgroundArc attr fill F3F3F4 let path charts append path path attr d mainArc attr fill color 20 Call this update function and the pie arc will transition to the new value this updatepie function toval oldvalue newvalue newvalue toval console log toval toval function arcTween newAngle k return function d let val d3 interpolate oldvalue newvalue d mainArc mainArcA startAngle angle 1 endAngle function d return val 100 angle path attr d mainArc attr fill color val textholder text val toFixed 1 end return function d end arcTween d3 select body transition duration 200 delay 0 attrTween d arcTween end update return this var chart new initChart Testing call this method every second with a new value 0 100 to see the transition working function changevalue chart updatepie Math random 100 setInterval changevalue 1000 console log ready script Extends the previous example but also includes dynamic resizing to the svg window size Keeps the aspect ratio style body min height 400px style script type text javascript src https d3js org d3 v7 min js script script document body style height 660px let initChart function let width 148 let height 348 let radius Math min width height 2 2 let color d3 scaleLinear domain 1 100 range blue red let angle 0 5 Math PI let newwidth width let newheight height let oldvalue 20 let newvalue 20 let svg d3 select body append svg attr width width attr height height style border 1px dashed gray let chartsgroup svg selectAll g data oldvalue enter append g let charts chartsgroup classed chartgroup true attr transform function return translate width 2 radius let backgroundArcA d3 arc let backgroundArc backgroundArcA innerRadius 58 outerRadius radius cornerRadius 20 startAngle angle 1 endAngle angle charts append path classed backpath true attr d backgroundArc attr fill F3F3F4 let mainArcA d3 arc let mainArc mainArcA innerRadius 58 outerRadius radius cornerRadius 20 startAngle angle 1 endAngle function d return d 100 angle let legend svg selectAll legend data oldvalue enter append g attr class legend attr transform function return translate 21 21 let textholder legend append text textholder attr x 22 attr y 12 attr text anchor middle attr transform translate width 2 radius text function d return d let path charts append path path attr d mainArc attr fill color 20 Call this update function and the pie arc will transition to the new value this updatepie function toval console assert typeof toval number Error Invalid type console assert toval 0 toval 100 Error Number range 0 100 oldvalue newvalue newvalue toval console log toval toval function arcTween newAngle k return function d let val d3 interpolate oldvalue newvalue d mainArcA startAngle angle 1 endAngle function d return val 100 angle path attr d mainArc attr fill color val textholder text val toFixed 1 end return function d end arcTween d3 select abc remove d3 select body append div classed abc true transition duration 1500 delay 0 attrTween d arcTween end updatepie this updatesize function neww newh width newwidth height newheight newwidth neww newheight newh d3 select body transition duration 2000 delay 0 attrTween d function return function t let tmpwidth d3 interpolate width newwidth t let tmpheight d3 interpolate height newheight t oldradius radius radius Math min tmpwidth tmpheight 2 2 d3 select svg attr width tmpwidth attr height tmpheight chartsgroup attr transform function return translate tmpwidth 2 radius textholder attr transform translate tmpwidth 2 radius backgroundArcA outerRadius radius d3 select backpath attr d backgroundArc attr fill 555555 mainArcA outerRadius radius path attr d mainArc end updatesize return this var chart new initChart Testing call this method every second with a new value 0 100 to see the transition working function changevalue chart updatepie Math random 100 setInterval changevalue 2000 Testing call to show the transition to new dimensions function changesize chart updatesize 150 Math random 500 150 Math random 500 setInterval changesize 4000 console log ready script
attr transform function return translate width 2 radius let backgroundArcA d3 arc let backgroundArc backgroundArcA innerRadius 58 outerRadius radius cornerRadius 20 startAngle angle 1 endAngle angle charts append path classed backpath true attr d backgroundArc attr fill F3F3F4 let mainArcA d3 arc let mainArc mainArcA innerRadius 58 outerRadius radius cornerRadius 20 startAngle angle 1 endAngle function d return d 100 angle let legend svg selectAll legend data oldvalue enter append g attr class legend attr transform function return translate 21 21 let textholder legend append text textholder attr x 22 attr y 12 attr text anchor middle attr transform translate width 2 radius text function d return d let path charts append path path attr d mainArc attr fill color 20 Call this update function and the pie arc will transition to the new value this updatepie function toval console assert typeof toval number Error Invalid type console assert toval 0 toval 100 Error Number range 0 100 oldvalue newvalue newvalue toval console log toval toval function arcTween newAngle k return function d let val d3 interpolate oldvalue newvalue d mainArcA startAngle angle 1 endAngle function d return val 100 angle path attr d mainArc attr fill color val textholder text val toFixed 1 end return function d end arcTween d3 select abc remove d3 select body append div classed abc true transition duration 1500 delay 0 attrTween d arcTween end updatepie this updatesize function neww newh width newwidth height newheight newwidth neww newheight newh d3 select body transition duration 2000 delay 0 attrTween d function return function t let tmpwidth d3 interpolate width newwidth t let tmpheight d3 interpolate height newheight t oldradius radius radius Math min tmpwidth tmpheight 2 2 d3 select svg attr width tmpwidth attr height tmpheight chartsgroup attr transform function return translate tmpwidth 2 radius textholder attr transform translate tmpwidth 2 radius backgroundArcA outerRadius radius d3 select backpath attr d backgroundArc attr fill 555555 mainArcA outerRadius radius path attr d mainArc end updatesize return this var chart new initChart Testing call this method every second with a new value 0 100 to see the transition working function changevalue chart updatepie Math random 100 setInterval changevalue 2000 Testing call to show the transition to new dimensions function changesize chart updatesize 150 Math random 500 150 Math random 500 setInterval changesize 4000 console log ready script