fkling / JSNetworkX

Build, process and analyze graphs in JavaScript (port of NetworkX)
https://felix-kling.de/jsnetworkx/
Other
757 stars 185 forks source link

How to update/redraw graph? #67

Open adamlawrencium opened 7 years ago

adamlawrencium commented 7 years ago

I'm trying to make a dynamic graph that updates every few seconds. What I'd ideally want is something like this:

    var G = new jsnx.Graph();

    G.addNode(0);
    jsnx.draw(G, {
        element: '#canvas',
        weighted: true,
        edgeStyle: {
            'stroke-width': 10
        }
    });

    var i = 1;
    setInterval(function () {
      G.addNode(i);
      i++;
      jsnx.redraw();
    }, 2000);

But I get a Uncaught TypeError: jsnx.redraw is not a function error. Otherwise I have to draw() every time I update the graph, which doesn't look good at all...

Anyone know a way to do this?

adamlawrencium commented 7 years ago

Actually just figured it out. https://github.com/fkling/JSNetworkX/blob/6854f88d9f0bb98fa951cb20ce13eb497f204274/src/drawing/svg.js#L173 says that if you add a true option to .draw(), it'll automatically update the graph:

    jsnx.draw(G, {
        element: '#canvas',
        weighted: true,
        edgeStyle: {
            'stroke-width': 10
        }
    }, true
);

Maybe the website should include this to help people who are just getting started with JSNetworkX

talhajunaidd commented 6 years ago

It is on website http://jsnetworkx.org/api/#/v/v0.3.4/draw

image