Rendering interactive graph with thousands of vertices and edges

[voidmen]

hi Folks,

I am new to here and I'm trying to find out whether pixijs could be a good choice for me.

What I need to do is render a possibly very large graph on the canvas, like the attached picture shows. As a bottom line, I need to draw like thousands of vertices and maybe 4-10 times of that many edges on the canvas and still stay responsive to user actions like panning around, zooming and selecting nodes and moving nodes around( the attached edge should be updated while moving). Other stuff like highlight and scale some vertex/edge I think should be trivial. 

No layout computing is required. The graph layout is calculated in advance.

I've tried some other frameworks like fabricjs and echarts. They could not handle more than 1000 vertices.

My questions is pixijs suitable for such task? And can I achieve the performance goal with reasonable amount of tweaks?

 

Thanks in advance!

[mattstyles]

I don't see any reason why Pixi can not handle this, it's optimised to draw many many sprites, maybe not so much for primitive stuff like circles and lines but I'd imagine you could get it to work without pulling your hair out too much.

Looks like maybe d3 would be a more natural fit though, as it was built with exactly this sort of visualisation and interaction in mind.

edit: just seen there is actually a d3 demo that is maybe very close to what you need.

[Fatalist]

I thinks that's achievable, depends on what types of devices do you need to support.

These examples may help you:

Drawing lots of antialiased circles

Drawing lots of antialiased lines

[voidmen]

19 hours ago, mattstyles said:

I don't see any reason why Pixi can not handle this, it's optimised to draw many many sprites, maybe not so much for primitive stuff like circles and lines but I'd imagine you could get it to work without pulling your hair out too much.

Looks like maybe d3 would be a more natural fit though, as it was built with exactly this sort of visualisation and interaction in mind.

edit: just seen there is actually a d3 demo that is maybe very close to what you need.

But d3 is rendering with SVG, right? I'm afraid that too many elements would make the DOM heavy.  But I could take a try though.

[voidmen]

12 hours ago, Fatalist said:

I thinks that's achievable, depends on what types of devices do you need to support.

These examples may help you:

Drawing lots of antialiased circles

Drawing lots of antialiased lines

Thanks, will try that out and post back my results.

[mattstyles]

50 minutes ago, voidmen said:

But d3 is rendering with SVG, right? I'm afraid that too many elements would make the DOM heavy.  But I could take a try though.

Yeah I think so, but I wouldn't worry about it. d3 is designed to handle huge datasets, if SVG couldn't handle it they'd have created another rendering solution by now.

[OlegVolkov]

@voidmen , hi what did you use for your graph visualization ? I supposed you have done it a long time ago ? 
Thanks!

[voidmen]

@OlegVolkov We went with pixijs. But didn't customize too much. 

End up with about ~5k sprites and ~10k links(curves).