简体   繁体   中英

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

add

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

before

network.redraw()

nodes.update()您可以使用network.redraw()函数刷新视图。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM