search

bkrem / react-d3-tree

:deciduous_tree: React component to create interactive D3 tree graphs
https://bkrem.github.io/react-d3-tree
MIT License
1.07k stars 270 forks source link

Debounce calls to `requestAnimationFrame` to avoid render-blocking on large graphs #22

Open bkrem opened 7 years ago

bkrem commented 7 years ago
llenodo commented 6 years ago

Hi there, whats the status on this issue? Having some perf issues with a large graph.

bkrem commented 6 years ago

Hi @llenodo,

The coordinated collapsing of nodes wasn't production-ready when I last had the chance to work on it so it's basically on hold right now.

The common solution for large graphs suggested in the docs is to set transitionDuration={0}, which will prevent animated transitions and keep the graph responsive to a very high node/edge count (e.g. see the "React Repo" & "Styled components repo" examples on the demo).

Hope that helps!

llenodo commented 6 years ago

Thanks for getting back to me @bkrem. Have you investigated whether or not the perf issues are inherent to d3 itself, or something to do with this library in particular?

I suspect it's this library as I've previously used raw d3 on a 3000 node tree that was animated, but currently having perf issues at 1000 nodes with this library.

Anything stick out to you that would be likely to be causing the issue?

bkrem commented 6 years ago

The issue seems to be with the way react-transition-group enqueues animations, or rather how react-transition-group and d3 (fail to) interact.

I still have some WIP (https://github.com/bkrem/react-d3-tree/commit/c0870127d2fde63a97a87a6dd6bf33ed7e73d316) from a while ago when I had more time to work on the lib.

It prevents the browser's main thread from locking up by debouncing the animation requests for each node relative to the next one, but there were still issues with the collapse order of the nodes as far as I remember + I have a feeling a less hacky solution should be possible.

If you have any suggestions or work of your own on how to solve the animation issue for large graphs I would love to have your input!