Search code examples
javascriptreactjsd3.jsreact-konva

Canvas and React Konva scalability for large datasets?


I'm working with a small group to build an interactive interface that will render a list of nodes and show how they are connected, almost like how some database modelers are. This is within a pre-existing application, and we will have up to a couple thousand data points that should be able to be dragged.

Some people have mentioned using a canvas element or packages like Konva.js or D3. I'm wondering if options like using a canvas or React-Konva would be able to handle something like this, or if we would need to go with an alternative like D3 or something else. Does anyone have any experience or knowledge about this?


Solution

  • It depends on what exactly you are going to draw and what kind of interactivity you needed. For Konva it may be hard to handle a thousand data points. But there are many Konva Performance Tips to improve the performance.

    If some parts of your drawings are static, you can use layers or node.cache() method to boost the performance.

    The only good way to know if a tool (Konva, D3 or anything else) is good is to make a prototype version of your app. Make a very simplified version with a lot of objects with every framework/library. And see what works best for you.