style margin 0 padding 0 box sizing border box body margin 10px auto font family Lato text align center width 700px h2 margin 25px margin bottom 50px font size 2em container display grid grid template columns 220px 220px 220px grid gap 10px font family Lato text align center font size 1 4em margin 0px item position relative padding 40px font size 1 5em border 1px solid black min height 150px b background violet padding 100px 0 grid area 2 1 4 3 a background violet grid area 1 2 2 3 style h2 D3 Dashboard Placing Elements with Explicit Positions h2 div class container div class item a id a div div class item b id b div div class item c id c div div class item d D div div class item e E div div class item f F div div class item f G div div class item f id h div div class item f I div div script type text javascript src https d3js org d3 v7 min js script script type text javascript src https notebook xbdev net var scripts linechart v01 js id 232 script script type text javascript src https notebook xbdev net var scripts piechart v01 js id 22 script script function addResizeEvent id callback let item document getElementById id item addEventListener mousemove function event if this ww event target offsetWidth this hh event target offsetHeight return this ww event target offsetWidth this hh event target offsetHeight if this null return if this ww null return console log offsetWidth this offsetWidth console log offsetHeight this offsetHeight callback this ww this hh let chart1 new lineChart d3 select a addResizeEvent a function w h chart1 updatesize w h updateall let chart2 new lineChart d3 select b addResizeEvent b function w h chart2 updatesize w h updateall let chart3 new lineChart d3 select c addResizeEvent c function w h chart3 updatesize w h updateall let chart4 new pieChart d3 select h addResizeEvent h function w h chart4 updatesize w h updateall function updateall d3 select a node dispatchEvent new Event mousemove d3 select b node dispatchEvent new Event mousemove d3 select c node dispatchEvent new Event mousemove d3 select h node dispatchEvent new Event mousemove updateall console log ready script
ment getElementById id item addEventListener mousemove function event if this ww event target offsetWidth this hh event target offsetHeight return this ww event target offsetWidth this hh event target offsetHeight if this null return if this ww null return console log offsetWidth this offsetWidth console log offsetHeight this offsetHeight callback this ww this hh let chart1 new lineChart d3 select a addResizeEvent a function w h chart1 updatesize w h updateall let chart2 new lineChart d3 select b addResizeEvent b function w h chart2 updatesize w h updateall let chart3 new lineChart d3 select c addResizeEvent c function w h chart3 updatesize w h updateall let chart4 new pieChart d3 select h addResizeEvent h function w h chart4 updatesize w h updateall function updateall d3 select a node dispatchEvent new Event mousemove d3 select b node dispatchEvent new Event mousemove d3 select c node dispatchEvent new Event mousemove d3 select h node dispatchEvent new Event mousemove updateall console log ready script