Vis.js网络图不会随节点更改而更新 [英] Vis.js network graph not updating with node changes

问题描述

我有一个函数可以清除节点或边缘数据集中的所有数据，然后继续用新数据重新填充它们。它是一个分层网络，并且在创建所有节点和边之后动态设置级别，因此节点的级别属性最终由nodes.update（）调用添加
。

节点的级别设置正确，可以在我的控制台日志中看到，但图表不反映级别。没有显示错误。看到节点看起来是如何正确的，我不认为这是设置水平问题的方法，但我能想到的唯一可能会干扰的其他事情是在像我这样的角度工厂中使用它，节点.update（）不会触发重新呈现图形，或者触发我的选项。任何见解都值得赞赏，因为我真的不知道为什么设置水平不会改变我的图表。

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：

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：

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

推荐答案

添加

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

之前

network.redraw()

这篇关于Vis.js网络图不会随节点更改而更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！