D3 js Drag and Resize Example that uses a simple Line Plot but with the added feature of drag and resize Click on the graph and move it around also resize it and the inner contents is updated Things to try Add multiple graphs on the fly that can be moved around dynamically Test the concept on a variety of different graphs Enable a lock ratio so when resized they can be kept to the correct apsect ratio Update the what is seen as resized i e instead of waiting for the final close mouse release style body min height 700px margin 0 resizer resizer triangle border left 9px solid transparent border top 9px solid transparent border right 9px solid rgba 255 0 0 0 4 border bottom 9px solid rgba 255 0 0 0 4 opacity 1 width 0px height 0px animation none style script type text javascript src https d3js org d3 v7 min js script div id container style width 600px height 600px border 1px solid blue position absolute left 20px top 20px div script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x i 100 y Math sin 6 2 i 100 Get the limits of the data the full extent mins and max so the plotted data fits perfectly const xExtent d3 extent data d return d x const yExtent d3 extent data d return d y Append SVG Object to the Page const svg d3 select container append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleLinear domain xExtent 0 xExtent 1 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain yExtent 0 yExtent 1 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Add the line svg append path datum data 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 resizeElement document getElementById container dragElement document getElementById container var g_mouselock false function resizeElement elmnt var element elmnt var resizer document createElement div resizer className resizer resizer style position absolute resizer style right 1px resizer style bottom 1px resizer style cursor se resize resizer style z index 1 resizer style color fef resizer style z index 33 resizer contentEditable false resizer setAttribute contenteditable false element appendChild resizer resizer addEventListener mousedown initResize false function initResize e if g_mouselock return g_mouselock true e e window event e preventDefault window addEventListener mousemove startResize false window addEventListener mouseup stopResize false function startResize e e e window event e preventDefault element style width e clientX element getBoundingClientRect left px element style height e clientY element getBoundingClientRect top px function stopResize e window removeEventListener mousemove startResize false window removeEventListener mouseup stopResize false g_mouselock false let esize left parseFloat element style left top parseFloat element style top width parseFloat element style width height parseFloat element style height let w esize width xSize 100 let h esize height ySize 100 element children 0 style transform translate 50 50 scale w h translate 50 50 end resizeElement function dragElement elmnt var eelement elmnt var pos1 0 pos2 0 pos3 0 pos4 0 eelement style cursor move eelement addEventListener mousedown dragMouseDown false function dragMouseDown e if g_mouselock return g_mouselock true e e window event e preventDefault e stopPropagation get the mouse cursor position at startup pos3 e clientX pos4 e clientY window addEventListener mouseup closeDragElement false window addEventListener mousemove elementDrag false function elementDrag e e e window event e preventDefault calculate the new cursor position pos1 pos3 e clientX pos2 pos4 e clientY pos3 e clientX pos4 e clientY set the element s new position eelement style top eelement offsetTop pos2 px eelement style left eelement offsetLeft pos1 px function closeDragElement g_mouselock false stop moving when mouse button is released window removeEventListener mouseup closeDragElement false window removeEventListener mousemove elementDrag false g_mouselock 0 let esize left parseFloat eelement style left top parseFloat eelement style top width parseFloat eelement style width height parseFloat eelement style height let x esize left let y esize top let w esize width xSize 100 let h esize height ySize 100 eelement children 0 style transform translate 50 50 scale w h translate 50 50 eelement style left x px eelement style top y px end dragElement console log ready script Extension of the above example but instead of using transform to scale update you set attr preserveAspectRatio none D3 js Drag and Resize Example that uses a simple Line Plot but with the added feature of drag and resize Click on the graph and move it around also resize it and the inner contents is updated Things to try Add multiple graphs on the fly that can be moved around dynamically Test the concept on a variety of different graphs Enable a lock ratio so when resized they can be kept to the correct apsect ratio Update the what is seen as resized i e instead of waiting for the final close mouse release style body min height 700px margin 0 resizer resizer triangle border left 9px solid transparent border top 9px solid transparent border right 9px solid rgba 255 0 0 0 4 border bottom 9px solid rgba 255 0 0 0 4 opacity 1 width 0px height 0px animation none style script type text javascript src https d3js org d3 v7 min js script div id container style width 600px height 600px border 1px solid blue position absolute left 20px top 20px div script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x i 100 y Math cos 6 2 i 100 Math sin 6 2 i 100 10 0 2 Get the limits of the data the full extent mins and max so the plotted data fits perfectly const xExtent d3 extent data d return d x const yExtent d3 extent data d return d y Append SVG Object to the Page const svg d3 select container append svg attr preserveAspectRatio none IMPORTANT attr viewBox 0 0 xSize ySize attr width 100 attr height 100 append g attr transform translate margin margin X Axis const x d3 scaleLinear domain xExtent 0 xExtent 1 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain yExtent 0 yExtent 1 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Add the line svg append path datum data 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 resizeElement document getElementById container dragElement document getElementById container var g_mouselock false function resizeElement elmnt var element elmnt var resizer document createElement div resizer className resizer resizer style position absolute resizer style right 1px resizer style bottom 1px resizer style cursor se resize resizer style z index 1 resizer style color fef resizer style z index 33 resizer contentEditable false resizer setAttribute contenteditable false element appendChild resizer resizer addEventListener mousedown initResize false function initResize e if g_mouselock return g_mouselock true e e window event e preventDefault window addEventListener mousemove startResize false window addEventListener mouseup stopResize false function startResize e e e window event e preventDefault element style width e clientX element getBoundingClientRect left px element style height e clientY element getBoundingClientRect top px function stopResize e window removeEventListener mousemove startResize false window removeEventListener mouseup stopResize false g_mouselock false let esize left parseFloat element style left top parseFloat element style top width parseFloat element style width height parseFloat element style height element style width esize width px element style height esize height px end resizeElement function dragElement elmnt var eelement elmnt var pos1 0 pos2 0 pos3 0 pos4 0 eelement style cursor move eelement addEventListener mousedown dragMouseDown false function dragMouseDown e if g_mouselock return g_mouselock true e e window event e preventDefault e stopPropagation get the mouse cursor position at startup pos3 e clientX pos4 e clientY window addEventListener mouseup closeDragElement false window addEventListener mousemove elementDrag false function elementDrag e e e window event e preventDefault calculate the new cursor position pos1 pos3 e clientX pos2 pos4 e clientY pos3 e clientX pos4 e clientY set the element s new position eelement style top eelement offsetTop pos2 px eelement style left eelement offsetLeft pos1 px function closeDragElement g_mouselock false stop moving when mouse button is released window removeEventListener mouseup closeDragElement false window removeEventListener mousemove elementDrag false g_mouselock 0 let esize left parseFloat eelement style left top parseFloat eelement style top width parseFloat eelement style width height parseFloat eelement style height let x esize left let y esize top eelement style left x px eelement style top y px end dragElement console log ready script
nsion of the above example but instead of using transform to scale update you set attr preserveAspectRatio none D3 js Drag and Resize Example that uses a simple Line Plot but with the added feature of drag and resize Click on the graph and move it around also resize it and the inner contents is updated Things to try Add multiple graphs on the fly that can be moved around dynamically Test the concept on a variety of different graphs Enable a lock ratio so when resized they can be kept to the correct apsect ratio Update the what is seen as resized i e instead of waiting for the final close mouse release style body min height 700px margin 0 resizer resizer triangle border left 9px solid transparent border top 9px solid transparent border right 9px solid rgba 255 0 0 0 4 border bottom 9px solid rgba 255 0 0 0 4 opacity 1 width 0px height 0px animation none style script type text javascript src https d3js org d3 v7 min js script div id container style width 600px height 600px border 1px solid blue position absolute left 20px top 20px div script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x i 100 y Math cos 6 2 i 100 Math sin 6 2 i 100 10 0 2 Get the limits of the data the full extent mins and max so the plotted data fits perfectly const xExtent d3 extent data d return d x const yExtent d3 extent data d return d y Append SVG Object to the Page const svg d3 select container append svg attr preserveAspectRatio none IMPORTANT attr viewBox 0 0 xSize ySize attr width 100 attr height 100 append g attr transform translate margin margin X Axis const x d3 scaleLinear domain xExtent 0 xExtent 1 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain yExtent 0 yExtent 1 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Add the line svg append path datum data 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 resizeElement document getElementById container dragElement document getElementById container var g_mouselock false function resizeElement elmnt var element elmnt var resizer document createElement div resizer className resizer resizer style position absolute resizer style right 1px resizer style bottom 1px resizer style cursor se resize resizer style z index 1 resizer style color fef resizer style z index 33 resizer contentEditable false resizer setAttribute contenteditable false element appendChild resizer resizer addEventListener mousedown initResize false function initResize e if g_mouselock return g_mouselock true e e window event e preventDefault window addEventListener mousemove startResize false window addEventListener mouseup stopResize false function startResize e e e window event e preventDefault element style width e clientX element getBoundingClientRect left px element style height e clientY element getBoundingClientRect top px function stopResize e window removeEventListener mousemove startResize false window removeEventListener mouseup stopResize false g_mouselock false let esize left parseFloat element style left top parseFloat element style top width parseFloat element style width height parseFloat element style height element style width esize width px element style height esize height px end resizeElement function dragElement elmnt var eelement elmnt var pos1 0 pos2 0 pos3 0 pos4 0 eelement style cursor move eelement addEventListener mousedown dragMouseDown false function dragMouseDown e if g_mouselock return g_mouselock true e e window event e preventDefault e stopPropagation get the mouse cursor position at startup pos3 e clientX pos4 e clientY window addEventListener mouseup closeDragElement false window addEventListener mousemove elementDrag false function elementDrag e e e window event e preventDefault calculate the new cursor position pos1 pos3 e clientX pos2 pos4 e clientY pos3 e clientX pos4 e clientY set the element s new position eelement style top eelement offsetTop pos2 px eelement style left eelement offsetLeft pos1 px function closeDragElement g_mouselock false stop moving when mouse button is released window removeEventListener mouseup closeDragElement false window removeEventListener mousemove elementDrag false g_mouselock 0 let esize left parseFloat eelement style left top parseFloat eelement style top width parseFloat eelement style width height parseFloat eelement style height let x esize left let y esize top eelement style left x px eelement style top y px end dragElement console log ready script