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}]

回答1:

add

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

before

network.redraw()

回答2:

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

来源：https://stackoverflow.com/questions/35563147/vis-js-network-graph-not-updating-with-node-changes

标签

javascript

angularjs

vis.js