CODEWITHSUNDEEP
cssreactjsd3.jssvgresize
mtx
mtx

Reputation: 1234

Resizing React component that holds SVG (d3)

I have following component structure in simple react app

<div id='app'>
 <Navbar />
 <Graph />
 <Footer />
</div>

Navbar has fixed height 80px

Footer has fixed height 40px

Graph is a d3-wrapper div that contains SVG with graph elements.

  1. How to fit Graph into the remaining height of the screen so it always occupies the remaining height the screen?

  2. How to update react component containing d3-wrapper/SVG on resize event?

PS. As I want the graph to be responsive I should not hardcode width and height of the SVG.

Here is codepen snippet where I tried to solve this issue.

Upvotes: 1

Views: 2314

Answers (1)

mtx
mtx

Reputation: 1234

Ok so I have found solution for this. The shortest way is to leave majority of work to css:

.d3-wrapper {
  width: 100%;
  height: calc(100vh - #{$footerHeight + $navbarHeight}); 
}

svg {
 width: 100%;
 height: 100%;
}

Then in d3-wrapper component, if needed, create ref to the div and pass clientWidth and clientHeight to svg component as props.

For on resize update, add resize listener and make svg component update itself.

Upvotes: 4

Related Questions