SVG Grid dynamically updating changing 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 parentE let width 148 let height 148 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 parentElement parentE if parentE parentElement d3 select body let tweenA parentElement append span let tweenB parentElement append span let svg parentElement 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 let backpath charts append path backpath 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 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 tweenA transition duration 1500 delay 0 attrTween d arcTween end updatepie this updatesize function neww newh width newwidth height newheight newwidth neww newheight newh tweenB 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 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 backpath attr d backgroundArc attr fill 555555 mainArcA outerRadius radius path attr d mainArc end updatesize return this new initChart d3 select body append span updatepie 10 new initChart d3 select body append span updatepie 40 new initChart d3 select body append span updatepie 90 new initChart d3 select body append span updatepie 60 new initChart d3 select body append span updatepie 5 var chart new initChart d3 select body append span 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
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 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 tweenA transition duration 1500 delay 0 attrTween d arcTween end updatepie this updatesize function neww newh width newwidth height newheight newwidth neww newheight newh tweenB 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 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 backpath attr d backgroundArc attr fill 555555 mainArcA outerRadius radius path attr d mainArc end updatesize return this new initChart d3 select body append span updatepie 10 new initChart d3 select body append span updatepie 40 new initChart d3 select body append span updatepie 90 new initChart d3 select body append span updatepie 60 new initChart d3 select body append span updatepie 5 var chart new initChart d3 select body append span 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