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

Question

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

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

导航栏固定高度为 80px

页脚的高度固定为 40px

Graph 是一个 d3 包装器 div，其中包含带有图形元素的 SVG。

1. 如何让Graph适应屏幕的剩余高度，使其始终占据屏幕的剩余高度？

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

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

Here 是我试图解决这个问题的代码笔片段。

Answer 1

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

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

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

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

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