CODEWITHSUNDEEP
javascriptangularjsvis.js
Elijah Madden
Elijah Madden

Reputation: 61

Vis.js network graph not updating with node changes

I have a function that clears any data that might be in the nodes or edges dataset, and goes on to repopulate them with new data. It's a hierarchical network, and levels are dynamically set AFTER all the nodes and edges have been created, so the level property of the nodes are ultimately added by nodes.update() calls.
The nodes' levels are correctly set, and can be seen in my console log, but the graph doesn't reflect the levels. No errors are shown. Seeing as how the nodes seem to be correct, I don't think it's the method setting the levels that's the issue, but the only other things I can think of that may possibly interfere is using it in an angular factory like I am, nodes.update() not triggering a re-rendering of the graph, or something with my options. Any insight is appreciated, as I really have no clue why setting the levels doesn't change my graph.

Sorry for the lack of information. I just have no idea where to start and didn't want to share my whole file.

networkFactory:

var nodes, edges, network;
visApp.factory('networkFactory', function() {
    var service = {};

    service.init = function() {
        // create an array with nodes
        nodes = new vis.DataSet();

        // create an array with edges
        edges = new vis.DataSet();

        // create a network
        var container = document.getElementById('callFlow');
        var data = {
            nodes: nodes,
            edges: edges
        };
        var options = {
            physics: false,
            nodes: {
                shape: 'box',
                size: 25
            },
            edges: {
                smooth: {
                    type: 'cubicBezier',
                    roundness:.75
                }
            },
            layout: {
                hierarchical: {
                    direction: 'LR',
                    sortMethod: 'directed'
                }
            },
            interaction: {
                navigationButtons: true
            }
        };
        network = new vis.Network(container, data, options);
    };
    service.updateVis = function(profile) {
        try {
            console.log("updating network...");
            clearNetwork();
            addNodesFromProfile(profile);
            addEdgesFromProfile(profile);
            console.log("setting hierarchical levels");
            setLevels("ENTRY", 1, 1);
            console.log("network updated:\n" + JSON.stringify(nodes.get()));
        }
        catch(err) {alert(err)}
    };

console.log:

updating network...
adding nodes
adding edges
setting hierarchical levels
network updated:
[{"id":"mainMenu","label":"mainMenu","level":4},{"id":"broadcast","label":"broadcast","level":3},{"id":"greeting","label":"greeting","level":2},{"id":"salesMenu","label":"salesMenu","level":5},{"id":"exitAssurance","label":"exitAssurance","level":5},{"id":"EXIT","label":"EXIT","level":7},{"id":"exitArchitecture","label":"exitArchitecture","level":6},{"id":"exitSalesEast","label":"exitSalesEast","level":6},{"id":"exitCXAnalytics","label":"exitCXAnalytics","level":6},{"id":"servicesMenu","label":"servicesMenu","level":5},{"id":"exitSalesWest","label":"exitSalesWest","level":6},{"id":"exitOther","label":"exitOther","level":5},{"id":"ENTRY","label":"ENTRY","level":1}]

Upvotes: 5

Views: 10565

Answers (3)

AntoineP
AntoineP

Reputation: 3073

To update the graph automatically, the following method must be called on your network object:

network.setData({nodes: yourNodes, edges: yourEdges})

Upvotes: 0

M. Plociennik
M. Plociennik

Reputation: 1

After nodes.update() you can use network.redraw() function to refresh view.

Upvotes: 0

JIemON
JIemON

Reputation: 396

add 

network.body.emitter.emit('_dataChanged')

before 

network.redraw()

Upvotes: 6

Related Questions