ReactJS avec D3JS Treemap

Question

Essayer de convertir zoomable Treemap dans les composants réactifs. Une partie de la route, mais pas sûre de la meilleure façon de transmettre des données entre les composants lorsque ces données dépendent du DOM Rendu (c'est-à-dire la largeur).

a survenu blog à propos de Mélanger réagir et D3JS. Superbes choses.

Utilisation de bootstrap pour contrôler le style CSS. Défini l'élément SVG avec une position absolue et une largeur maximale (100%) à l'intérieur d'un conteneur relatif:

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

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

La largeur de l'élément SVG change étant donné que l'écran est redimensionné. En supposant que le nœud Treemap attribue des attributs de X, Y, DX, DY doit être corrigé des valeurs non acquises. Pensant que je dois regarder l'événement de redimension de la fenêtre, choisissez les nouveaux dimensions de l'élément SVG ("parseint (d3.Select (". SVG-Content '). Style ("largeur"), 10); ") et Force Reactjs to re -Rendeur ("réact.RenderComponce").

Answer 1

Vous avez deux choix:

• donne la hauteur et la largeur actuelles à la disposition TREEMAP et recalculer le TREEMAP chaque fois que la hauteur et la largeur changent; ou,

• Calculez la disposition TREEMAP avec la taille par défaut (la hauteur maximale et la largeur seront 1, tout entier une proportion de celle-ci) et utilisez la hauteur et la largeur de courant comme facteur de mise à l'échelle lorsque vous dessinez les rectangilles.

Ensuite, lorsque la hauteur ou la largeur change, vous n'avez besoin que de redessiner, et non de recalculer la mise en page. Puisque vous essayez de garder différents composants séparés, cela semble être l'approche la plus judicieuse. Il est également juste plus efficace, car vous n'exécutez que la fonction de mise en page une fois. Vous pouvez simplement saisir la hauteur et la largeur actuelles de votre fonction redessinée (qui aura bien sûr accès au nœud SVG) et le composant de mise en page n'a pas besoin de savoir quoi que ce soit sur les dimensions.

Oh, et j'ai bien peur que parseInt(d3.select('.svg-content').style('width'), 10); ne fera pas ce que vous espérez, cela ne renvoie que des styles en ligne. Vous aurez besoin de saisir la largeur calculée. Il y a quelques exemples de la façon de le faire à la fin de Cette longue réponse sur zoomer .