Modular line drawing example split the resizing of the window and the line turns line blue when resizing the window turns line green when remapping the line style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script src https unpkg com d3 interpolate path build d3 interpolate path min js script script let lineChart function parentE let parentElement parentE if parentE parentElement d3 select body Set Dimensions let width 600 let height 600 manage the transition for chart size change let newwidth width let newheight height const margin 40 let tweenA parentElement append span Create Random 100 Points let pdata for let i 0 i 100 i pdata push x i 100 y Math sin 6 2 i 100 let pnewdata pdata Get the limits of the data the full extent mins and max so the plotted data fits perfectly let xExtent d3 extent pdata d return d x let yExtent d3 extent pdata d return d y Append SVG Object to the Page let svg parentElement append svg attr width width attr height height let group svg append g attr transform translate margin margin X Axis let x d3 scaleLinear x domain xExtent 0 xExtent 1 x range 0 width margin 2 bottom let bottomaxis group append g bottomaxis attr transform translate 0 height margin 2 call d3 axisBottom x attr color green make bottom axis green top let topaxis group append g topaxis call d3 axisTop x Y Axis let y d3 scaleLinear y domain yExtent 0 yExtent 1 y range height margin 2 0 left y axis let leftaxis group append g leftaxis call d3 axisLeft y right y axis let rightaxis group append g rightaxis attr transform translate width margin 2 0 call d3 axisRight y this updatesize function neww newh width newwidth height newheight newwidth neww newheight newh tweenA transition duration 1000 delay 0 attrTween d function return function t width d3 interpolate width newwidth t height d3 interpolate height newheight t svg attr width width attr height height x domain xExtent 0 xExtent 1 x range 0 width margin 2 y domain yExtent 0 yExtent 1 y range height margin 2 0 var path group selectAll lineTest data pdata path datum pdata attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y topaxis call d3 axisTop x leftaxis call d3 axisLeft y rightaxis attr transform translate width margin 2 0 call d3 axisRight y bottomaxis attr transform translate 0 height margin 2 call d3 axisBottom x attr color green make bottom axis green function t attrTween on end function console log done width newwidth height newheight newwidth neww newheight newh pdata pnewdata x domain d3 min pdata function d return d x d3 max pdata function d return d x y domain d3 min pdata function d return d y d3 max pdata function d return d y var path group selectAll lineTest data pdata var line d3 line curve d3 curveLinear x function d return x d x y function d return y d y path enter append path attr class lineTest merge path attr fill none attr stroke green attr stroke width 1 5 transition duration 1000 attrTween d function d return function t var previous d3 select this attr d var current line d return d3 interpolatePath previous current var pathInterpolator d3 interpolatePath previous current return pathInterpolator t end function t end attrTween this updatedata function newdata pnewdata newdata this updatesize width height let chart new lineChart Testing call this method every second with a new value 0 100 to see the transition working function changevalue Create Random Points let testdata let rx Math random 0 5 2 0 let ry Math random 0 5 2 0 let xx Math random 10 for let i 0 i 100 i testdata push x i 100 xx y Math sin rx ry 6 2 i 100 1 1 chart updatedata testdata setInterval changevalue 3000 changevalue Testing call to show the transition to new dimensions function changesize chart updatesize 150 Math random 500 150 Math random 500 setInterval changesize 6000 console log ready script
nt 1 y range height margin 2 0 var path group selectAll lineTest data pdata path datum pdata attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y topaxis call d3 axisTop x leftaxis call d3 axisLeft y rightaxis attr transform translate width margin 2 0 call d3 axisRight y bottomaxis attr transform translate 0 height margin 2 call d3 axisBottom x attr color green make bottom axis green function t attrTween on end function console log done width newwidth height newheight newwidth neww newheight newh pdata pnewdata x domain d3 min pdata function d return d x d3 max pdata function d return d x y domain d3 min pdata function d return d y d3 max pdata function d return d y var path group selectAll lineTest data pdata var line d3 line curve d3 curveLinear x function d return x d x y function d return y d y path enter append path attr class lineTest merge path attr fill none attr stroke green attr stroke width 1 5 transition duration 1000 attrTween d function d return function t var previous d3 select this attr d var current line d return d3 interpolatePath previous current var pathInterpolator d3 interpolatePath previous current return pathInterpolator t end function t end attrTween this updatedata function newdata pnewdata newdata this updatesize width height let chart new lineChart Testing call this method every second with a new value 0 100 to see the transition working function changevalue Create Random Points let testdata let rx Math random 0 5 2 0 let ry Math random 0 5 2 0 let xx Math random 10 for let i 0 i 100 i testdata push x i 100 xx y Math sin rx ry 6 2 i 100 1 1 chart updatedata testdata setInterval changevalue 3000 changevalue Testing call to show the transition to new dimensions function changesize chart updatesize 150 Math random 500 150 Math random 500 setInterval changesize 6000 console log ready script