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

[iceprosurface]

The performance is too poor.

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

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]

Here is a preview:

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

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

[iceprosurface]

Code from:

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

[iceprosurface]

Related to: #1108 #599

[jackyzha0]

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]

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?

[jackyzha0]

closed via https://github.com/jackyzha0/quartz/pull/1328