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

Posted 2023-02-22

【中文标题】调整包含 SVG (d3) 的 React 组件的大小

【英文标题】：Resizing React component that holds SVG (d3)

【发布时间】：2018-04-15 00:40:39

【问题描述】：

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

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

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

页脚的高度固定为 40px

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

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

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

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

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

【问题讨论】：

确保您的页脚和导航栏位置固定..

【参考方案1】：

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

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


svg 
 width: 100%;
 height: 100%;

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

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