Reaccjs con d3js treemap

Question

Tratando de convertir a Mike Bostock's Treemap zoomable en componentes reaccionar. Parte del camino allí, pero no está seguro de la mejor manera de pasar los datos entre los componentes cuando los datos depende de la DOM renderizada (es decir, el ancho).

se encontró en la blog sobre Mezcla reaccionar y D3JS. Grandes cosas.

utilizando bootstrap para controlar el estilo CSS. Definir el elemento SVG con una posición absoluta y un ancho máximo (100%) dentro de un contenedor relativo:

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

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

Entonces, el ancho del elemento SVG cambia a medida que se cambia la pantalla. Suponiendo que los atributos de nodo de treemap como X, Y, DX, DY tienen que fijar los valores no procentados. Pensando que tengo que ver el evento de cambio de tamaño de la ventana, recoger las nuevas dimensiones del elemento SVG ("Parsint (D3.Select ('. SVG-CONTENIDO'). Estilo ('ancho'), 10);") y fuerza reaccjs a re -Render ("reaccionar.RenderComponente").

Answer 1

Tienes dos opciones:

• Da la altura y el ancho actual al diseño del treemap y vuelva a calcular el treemap cada vez que cambie la altura y el ancho; o,

• Calcule el diseño del treemap con el tamaño predeterminado (la altura y el ancho máximo serán 1, todo lo demás, una proporción de la misma), y usar la altura y el ancho de la corriente como un factor de escala cuando dibuje los rectángulos.

Luego, cuando cambia la altura o el ancho, solo necesita volver a navegar, no recalcular el diseño. Ya que estás tratando de mantener separados diferentes componentes, eso parece el enfoque más sensible. También es más eficiente, ya que solo está ejecutando la función de diseño una vez. Solo puede agarrar la altura y la anchura actual desde su función de redrama (que, por supuesto, tendrá acceso al nodo SVG) y el componente de diseño no necesita saber nada sobre las dimensiones.

Oh, y tengo miedo de que parseInt(d3.select('.svg-content').style('width'), 10); no hará lo que esperas, que solo devuelve estilos en línea. Tendrás que agarrar el ancho computado. Hay algunos ejemplos de cómo hacerlo al final de esta larga respuesta al zoom .