Reacils mit d3js treemap

Question

Versuch, Mike Bostocks Zoomable TreeeReap in Reaktionskomponenten zu konvertieren. Teil des Weges dort, aber nicht sicher, ob die besten Daten zwischen Komponenten passieren kann, wenn diese Daten von der gerenderten DOM (d. H. Breite) abhängen.

kam über Ben Smith's Blog ungefähr Reacting React und D3Js. Tolles Zeug.

Verwenden von Bootstrap, um das CSS-Styling zu steuern. Definierte das SVG-Element mit absoluter Position und maximaler Breite (100%) innerhalb eines relativen Behälters:

generasacodicetagpre.

somit ändert sich die Breite des SVG-Elements, wenn der Bildschirm geändert wird. Angenommen, das Attributium des TreEemap-Knotens wie x, y, dx, dy-fixe Werte nicht zu erwähnen. Ich dachte, ich muss das Änderungsgänger-Ereignis des Fensters ansehen, wählen Sie die neuen SVG-Elementabmessungen ab ("ParSint (d3.select ('. SVG-Content'). Stil ('Breite'), 10);") und zwingen Reaktjs zu re -Render ("reagieren.rendercomponent").

Answer 1

Sie haben zwei Möglichkeiten:

.

• Geben Sie dem TreeEmal-Layout die aktuelle Höhe und Breite an und berechnen Sie die Treemap jedes Mal, wenn die Höhe und der Breite ändert; oder,

• Berechnen Sie das Treemap-Layout mit der Standardgröße (die maximale Höhe und der Breite ist 1, alles andere ein Anteil davon) und verwenden Sie die aktuelle Höhe und Breite als Skalierungsfaktor, wenn Sie die Rechtecke ziehen.

Wenn sich die Höhe oder der Breite ändert, müssen Sie das Layout nicht nur neu nutzen, nicht neu berechnen. Da Sie versuchen, verschiedene Komponenten getrennt zu halten, scheint dies der sinnvollste Ansatz zu sein. Es ist auch einfach effizienter, da Sie nur einmal die Layout-Funktion ausführen. Sie können einfach die aktuelle Höhe und Breite von Ihrer Redraw-Funktion ergreifen (die natürlich Zugriff auf den SVG-Knoten haben wird) und die Layout-Komponente muss nichts über die Dimensionen erfahren.

oh, und ich fürchte, ängstlich ist parseInt(d3.select('.svg-content').style('width'), 10); nicht das tun, was Sie hoffen, das gibt nur Inline-Stile zurück. Sie müssen die berechnete Breite ergreifen. Es gibt einige Beispiele, wie es am Ende von diese lange Antwort beim Zoomen ist.