Adjusting the size of a React element containing an SVG (d3)

Question

In my simple react app, I have the following component structure:

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

The Navbar has a fixed height of 80px.

The Footer has a fixed height of 40px.

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

How can I make sure the Graph always occupies the remaining height of the screen?
What is the best way to update the react component containing the d3-wrapper/SVG on a resize event?

Note: To ensure the graph is responsive, it is important not to hardcode the width and height of the SVG element.

Here is a codepen snippet where I attempted to address this issue.

Answer 1

Answer №1

After some exploration, I have discovered a solution to this issue. The most efficient approach is to delegate the majority of the work to CSS:

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

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

In the d3-wrapper component, if necessary, establish a reference to the div and send clientWidth and clientHeight to the svg component as props.

To handle resizing updates, include a resize listener and ensure the svg component can update itself.

Answer 2

After some exploration, I have discovered a solution to this issue. The most efficient approach is to delegate the majority of the work to CSS:

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

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

In the d3-wrapper component, if necessary, establish a reference to the div and send clientWidth and clientHeight to the svg component as props.

To handle resizing updates, include a resize listener and ensure the svg component can update itself.