サイズ変更は、私は簡単にコンポーネントの構造を以下たSVGを保持している成分（D3）

Question

を反応させるナビゲーションバーは、高さフッターが40ピクセル

グラフD3高さを固定した80px

を固定しているアプリ

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

を反応させます-wrapper div：SVGにグラフ要素が含まれています。

1. Graphを画面の残りの高さに合わせる方法は、常に画面の残りの高さを占めるようにしますか？

2. リサイズイベントでd3-wrapper/SVGを含む反応コンポーネントを更新するにはどうすればよいですか？

PS。私がグラフを反応させたいので、私はSVGの幅と高さをハードコーディングすべきではありません。

Hereは、私がこの問題を解決しようとしたcodepenスニペットです。

Answer 1

これで解決策が見つかりました。 最短の方法は、CSSに作業の大部分を残すことである。

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

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

そしてD3-ラッパー成分に、必要に応じて、DIV にREFを作成し、小道具としてSVGコンポーネントにclientWidthとclientHeightを渡します。

サイズ変更の更新については、resize listenerを追加してコンポーネントの更新を行うようにしてください。