anvaka / VivaGraphJS

Graph drawing library for JavaScript
Other
3.76k stars 425 forks source link

A couple of how-tos #222

Open MonkeyChap opened 6 years ago

MonkeyChap commented 6 years ago

Hi

I'm really liking VivaGraph, and trying to build an angularJS directive around it at the moment (I could maybe share that back into the project if you think it's useful). I can't find any documentation for a few things I'd like to do though.

Firstly, is it possible to run a simulation without showing the edges then show them when the animation stops ? That would greatly speed up the layout for larger graphs.

Second, is it possible to start a simulation in paused mode ? i.e. display the graph, but nothing moves until you call resume() ?

Third, can the nodes be added with some pre-assigned x,y coordinate ? Again, this is about speed-up for larger graphs.

Thanks

Ian

anvaka commented 6 years ago

Hello,

Thank you! Please share your directive when you think it's ready.

I don't think I have an example for hiding edges for vivagraph. If it becomes very slow you could try running with webgl renderer.

For the paused simulation you can use precompute (demo 1 and demo 2)

For the preassigned x, y coordinate you can set node position you can also pin node

mlarosa2 commented 6 years ago

Hello, first off, great library! It has been so useful :) As a followup question about setting node positions, I have the canvas pixel coordinates associated with the nodes, but when using WebGl, the nodes are totally in the wrong spot. Does viva have the functionality to translate these coordinates, or will I need to do that on my own?

gg4u commented 6 years ago

Hi All, joining the conversation. @mlarosa2 I found useful to use the module https://github.com/anvaka/ngraph.pixi instead of native webGl, because I found easier to place coordinates of nodes and decorations of nodes - such as images manipulation. You may have a look.

@MonkeyChap I vote the functionality of computing the nodes' position and then rendering the edges. But it not that easy, for much of the computation is not the rendering, is the layout positioning. And the layout positioning takes computes a force-directed adjustment, it does not matter if you see the edges rendered or not. Then, of course, there is also a computation of the browser to display the elements. SVG is not much suited for thousands of elements, but I I found it still very handy for readability and expand-on-demand interaction.

@anvaka have you thought to implement Cola as another version of force directed layout? Maybe it performs better to adjusting and it seems also nice to visually read the clusters of nodes. It may address @MonkeyChap suggestion.

Have a look here: http://ialab.it.monash.edu/webcola/examples/browsemovies.html