Reactjs com mapa de árvore D3js

Question

Tentando converter Mike Bostock mapa de árvore com zoom em componentes React.Parte do caminho, mas não tenho certeza sobre a melhor maneira de transmitir dados entre componentes quando esses dados dependem do DOM renderizado (ou seja,largura).

Me deparei com Ben Smith blog sobre misturar React e D3js.Coisas boas.

Usando Bootstrap para controlar o estilo CSS.Definido o elemento svg com posição absoluta e largura máxima (100%) dentro de um contêiner relativo:

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

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

Portanto, a largura do elemento svg muda conforme a tela é redimensionada.Supondo que os atributos do nó do mapa de árvore como x,y,dx,dy tenham valores fixos e não percentuais.Pensando que tenho que observar o evento de redimensionamento da janela, escolha as novas dimensões do elemento svg ("parseInt(d3.select('.svg-content').style('width'), 10);") e force o Reactjs a re -render ("React.renderComponent").

Answer 1

Você tem duas opções:

• forneça a altura e largura atuais ao layout do mapa de árvore e recalcule o mapa de árvore sempre que a altura e a largura mudarem;ou,

• calcule o layout do mapa de árvore com o tamanho padrão (a altura e a largura máximas serão 1, todo o resto será uma proporção delas) e use a altura e a largura atuais como um fator de escala ao desenhar os retângulos.

Então, quando a altura ou largura mudar, você só precisará redesenhar e não recalcular o layout.Como você está tentando manter diferentes componentes separados, essa parece ser a abordagem mais sensata.Também é mais eficiente, já que você executa a função de layout apenas uma vez.Você pode simplesmente obter a altura e a largura atuais de sua função de redesenho (que obviamente terá acesso ao nó svg) e o componente de layout não precisa saber nada sobre as dimensões.

Ah, e estou com medo parseInt(d3.select('.svg-content').style('width'), 10); não fará o que você espera, apenas retornará estilos embutidos.Você precisará pegar a largura calculada.Existem alguns exemplos de como fazer isso no final de esta longa resposta sobre zoom.