ReactJS con D3JS TreeMap

Question

Cercando di convertire Mike Bostock's Zoomable TreeMap in componenti reagire. Parte del modo in cui non è sicuro il modo migliore per passare intorno ai dati tra i componenti quando tali dati dipendono dal DOM reso (I.E. Larghezza).

è venuto attraverso Ben Smith's blog Miscelazione reagire e D3JS. Ottima roba.

Utilizzo di Bootstrap per controllare lo styling CSS. Definito l'elemento SVG con una posizione assoluta e larghezza massima (100%) all'interno di un contenitore relativo:

 .svg-container {
   position: relative;
   padding-bottom: 30%;
   overflow: hidden;
   }

 .svg-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 } 

.

Quindi la larghezza del elemento SVG cambia come lo schermo è ridimensionato. Supponendo che gli attributi del nodo di TreeMap come X, Y, DX, DY devono risolvere valori non piccoli. Pensando devo guardare l'evento di ridimensionamento della finestra, scegli le nuove dimensioni dell'elemento SVG ("Parseint (D3.Select (". SVG-Content "). Stile (" larghezza "), 10);") e forza reactjs a ri -Render ("react.renderComponent").

Answer 1

Hai due scelte:

.

• Dare l'altezza corrente e la larghezza del layout di TreeMap e ricalcolare il TAREMAP ogni volta l'altezza e la larghezza del cambiamento; o,

• Calcola il layout di Tremail con la dimensione predefinita (l'altezza massima e la larghezza sarà 1, tutto il resto della proporzione) e utilizzare l'altezza e la larghezza corrente come un fattore di ridimensionamento quando si disegna i rettangoli.

Quindi, quando l'altezza o la larghezza cambia, è necessario ridisegnare solo, non ricalcolare il layout. Dal momento che stai cercando di tenere separati componenti diversi, sembra l'approccio più sensato. Inoltre è solo più efficiente, dal momento che stai usando solo la funzione di layout una volta. Puoi semplicemente prendere l'altezza e la larghezza corrente dall'interno della tua funzione Redraw (che ovviamente avrà accesso al nodo SVG) e il componente di layout non è necessario sapere nulla sulle dimensioni.

Oh, e temo che parseInt(d3.select('.svg-content').style('width'), 10); non farà quello che spera, che restituisce solo gli stili in linea. Avrai bisogno di prendere la larghezza calcolata. Ci sono alcuni esempi di come farlo alla fine di questa lunga risposta su zoom .