search

okonet / react-container-dimensions

Wrapper component that detects element resize and passes new dimensions down the tree. Based on https://github.com/wnr/element-resize-detector
MIT License
229 stars 26 forks source link

container updates slow down d3-force convergence #60

Closed sauln closed 5 years ago

sauln commented 5 years ago

Thanks for this easy to use component. It has completely solved my sizing issues, but has created a new problem that I'm not sure how to resolve. Apologizes if I should post this elsewhere, or if it is due to my novice react+js skills.

Without the ContainerDimension component, my react-d3-graph renders quickly and correctly, but with weird dimensions. When I add the ContainerDimension, the size of the graph is correct but the graph renders very slowly and does not converge on the layouts I saw before.

I suspect this is because ContainerDimension slows the rendering down and the force simulation decays too quickly. It seems that the Container resizing is only triggered a handful of times though.

Do you have any ideas on how to use ContainerDimension without slowing down the graph layout algorithm?

Thank you,

okonet commented 5 years ago

This component should not slow down rendering. I'm not sure what's going on but if you'd like I could look into it (on the paid bases). Tips: look into unnecessary re-renders. You might want to implement shouldComponentUpdate on your graph component if the size isn't changing.

sauln commented 5 years ago

The problem seems to be with the d3-graph library. Thanks for your time.