search

jackyzha0 / quartz

🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites
https://quartz.jzhao.xyz
MIT License
5.94k stars 2.37k forks source link

Is it a better choice to use canvas instead of svg for force-directed graphs? #1144

Open iceprosurface opened 1 month ago

iceprosurface commented 1 month ago

The performance is too poor.

When there is a very large number of documents, displaying the entire mind map is extremely laggy.

image

How about considering using WebGL or canvas for drawing? Below is an example of rendering with the same nodes, which is relatively much smoother.

https://stackblitz.com/edit/vitejs-vite-fbexju?file=src%2Fmain.ts

https://github.com/jackyzha0/quartz/assets/16058059/baa9c372-4b2f-4688-8291-0e931fccd44e

iceprosurface commented 1 month ago

Here is a preview:

https://iceprosurface.com/demo/d3-force-directed-graphs/

https://iceprosurface.com/demo/d3-force-directed-graphs-2d/

iceprosurface commented 1 month ago

Code from:

https://github.com/vasturiano/force-graph https://github.com/vasturiano/3d-force-graph

iceprosurface commented 1 month ago

Related to: #1108 #599

jackyzha0 commented 1 month ago

I'd welcome a PR if you can reach feature parity with the existing graph! We use d3 right now and I think that d3 has a Canvas mode but not sure how it works

iceprosurface commented 1 month ago

I implemented one using PixiJS and D3. Although there are still quite a few issues with the styles, it has been verified that it can indeed be integrated into Quartz, and the performance is excellent.

On my Mac, with a DPI of 2, it can run at 60fps with 752 nodes and 3600 links, which is a significant improvement compared to before.

Here is the implementation link: https://github.com/iceprosurface/quartz-blog/tree/feat/graph-test/packages/quartz-graph-plugin

and demo: https://cdn.iceprosurface.com/demo/quartz-graph-plugin/

However, there's a significant issue: currently, Quartz doesn't seem to compile PixiJS and TweenJS very well. Additionally, I think compiling TweenJS and PixiJS into the PostScript would make it too large. Do you have any good solutions for this?