import React , { useRef } from "react" ; import * as d3 from "d3" ; const BubbleChart = ( ) => { const divRef = useRef < HTMLDivElement > ( null ) ; const createSvg = ( ) => { return d3 . select ( divRef . current ) . append ( "svg" ) . attr ( "width" , 400 ) . attr ( "height" , 400 ) . attr ( "style" , "border:  thin red solid" ) ; } ; const drawChart = ( svg ) => { svg . append ( "circle" ) . attr ( "r" , 100 ) ; } ; React . useEffect ( ( ) => { const svg = createSvg ( ) ; drawChart ( svg ) ; console . log ( divRef ) ; } , [ ] ) ; return ( < > < h1 > Bubble Chart < /h1> < div id = "d3-bubble-Chart" ref = { divRef } > < /div> < />); } ; export default BubbleChart ;