Ändern der Größe von React-Komponente, die SVG (d3)

Question

hält

I in einfacher folgenden Komponentenstruktur haben reagieren app

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

Navbar Höhe fixiert hat 80px

Footer Höhe 40px

Graph befestigt hat, ist ein d3 -wrapper div, das SVG mit Grafikelementen enthält.

1. Wie wird Graph in die verbleibende Höhe des Bildschirms passen, so dass es immer die verbleibende Höhe des Bildschirms einnimmt?

2. Wie update react Komponente mit d3-Wrapper/SVG auf Resize Event?

PS. Da ich möchte, dass der Graph reagiert, sollte ich die Breite und Höhe des SVG nicht fest codieren.

Here ist Codepen-Snippet, wo ich versuchte, dieses Problem zu lösen.

Answer 1

Ok, also habe ich eine Lösung dafür gefunden. Der kürzeste Weg ist Mehrheit der Arbeit zu CSS verlassen:

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

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

dann in d3-Wrapper-Komponente, falls erforderlich, erstellen ref an den div und übergibt client und client Komponente als Requisiten SVG.

Für on Größe ändern, fügen Sie Größe Listener und machen Svg-Komponente selbst aktualisieren.