search

anvaka / VivaGraphJS

Graph drawing library for JavaScript
Other
3.73k stars 423 forks source link

Will <canvas> improve scalability and portability ? #198

Open gg4u opened 7 years ago

gg4u commented 7 years ago

Hi @anvaka , I found SVG implementation very handy, however, did you considered to support also rendering of graph on html5 ?

I thought that for expanded-on-demand graphs it would be a really good approach, for drawing only visibile elements on the canvas, instead of progressively adding new elements on the DOM.

Basically, I see graphs as a google maps, so that you can zoom on more details only on the portion you are interested in - perfect for exploring hair-balls.

Or do you have any particular reason for which you choose not to support ?

Possible to use the layout part to compute position of elements, and a new module for rendering of elements that check which are in the viewports and does the rendering ?

josephrocca commented 7 years ago

You can use WebGL like so:

    let graph = Viva.Graph.graph();
    let webglGraphics = Viva.Graph.View.webglGraphics();
    let renderer = Viva.Graph.View.renderer(graph, {
      container: document.querySelector('#graph-ctn'),
      graphics: webglGraphics,
    });

It's waaaay faster than SVG.

gg4u commented 7 years ago

Would you tell about pros/cons you see between canvas and webgl ?

How to improve webgl rendering ? In vivagraph I see that webgl doubles rendering of edges and nodes when zooming the graph.

I see some nice examples with pixi.js and three.js + ngraph. Is webgl rendering in vivagraph different from renderer in ngraph + pixi ? If so, I would really find useful a little tutorial showing how to build vivagraph with custom rendering engine and some examples to customise nodes and edges looking with images.