IT技术 - 调整保存 SVG (d3) 的 React 组件的大小 - 吾爱随笔录

IT技术 css reactjs d3.js svg resize

2021-05-21 05:59:23

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

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

导航栏有固定高度 80px

页脚具有固定高度 40px

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

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

这是我试图解决此问题的 codepen 片段。

1个回答

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

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

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

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

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

其它你可能感兴趣的问题