调整包含 SVG (d3) 的 React 组件的大小

Question

我在简单的反应应用中有以下组件结构

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

导航栏的高度固定为 80 像素

页脚的高度固定为 40px

Graph 是一个 d3-wrapper div，它包含带有图形元素的 SVG。

1. 如何将 Graph 放入屏幕的剩余高度，使其始终占据屏幕的剩余高度？

2. 如何在调整大小事件时更新包含 d3-wrapper/SVG 的反应组件？

PS。由于我希望图表具有响应性，因此我不应该对 SVG 的宽度和高度进行硬编码。

Here 是我试图解决这个问题的 codepen sn-p。

Answer 1

好的，我已经找到了解决方案。 最短的方法是将大部分工作留给 css：

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

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

然后在 d3-wrapper 组件中，如果需要，创建 ref 到 div 并将 clientWidth 和 clientHeight 作为道具传递给 svg 组件。

对于调整大小更新，添加调整大小监听器并使 svg 组件自行更新。