Сеть Vis.js не обновляется при изменении - PullRequest
Новая
       32

Сеть Vis.js не обновляется при изменении

0 голосов
/ 01 января 2019

Я использую библиотеку vis.js для создания диаграммы сети, и у меня возникают трудности с обновлением графика.Это довольно простая диаграмма, но я пытаюсь добавить функциональность, когда все узлы неактивны, за исключением щелкающего узла, когда кто-то щелкает.

В этой теме более подробно описан вопрос, но в ответе не показан код для помощи.

Обратите внимание, что я уже проверил эти темы:

  • Этот мне не помог, поскольку он сильно сфокусирован на angularjs, и я использую ванильный javascript. Этот объясняет, как затенять узлы, но не дает подробностей о том, как обновить график.

Вот упрощенная версия моего кода: 

var raw_edges = new vis.DataSet([]);
var raw_nodes = new vis.DataSet([]);

//Get the data from external API. 
var getEdges = new Promise(function(resolve, reject) {
    ...  // Details removed here for brevity sake
    resolve(raw_edges);
});

var getNodes = new Promise(function(resolve, reject) {
    ... 
     resolve(raw_nodes);
});


// Put it all together
Promise.all([getEdges,getNodes]).then(function() {

    //Add additional properties to each node
    raw_nodes.map(function(node) {
        // Add label - Same value as the Datasource Name, which is the ID field
        node.label = node.id;
        node.title = node.id;
        node.shadow = false;
        node.shape = 'dot';
        node.group = node.data_type;
        node.borderWidth = 0.5;
        var cleaned_node_name = (node.id).replace(" ", "_");
        node.size = (5 + totalSize[cleaned_node_name])*3 || 0;

        return raw_nodes; 
    }); 

    raw_edges.map(function(edge) {
        edge.color = '#BBBBBB';
        edge.arrows = 'middle'; 
        edge.smooth = true; 
        edge.shadow = false;

        return raw_edges;
    });

    var active_nodes = raw_nodes.filter(function(node) {
        return node.size > 0;
    });

    // access network container
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data =  {
        nodes: active_nodes,
        edges: raw_edges
    };
    console.log('data is ', data);

    //Set options
    var options = {
        width: "1024px",
        height: "768px",
        layout: {
            randomSeed: 5003,
            improvedLayout: true
        },
        interaction: {
            selectConnectedEdges: true
        }
    };

    // initialize your network!
    var network = new vis.Network(container, data, options);

    // listen for a click
    network.on('click', function(d) {
        console.log('Clicked!', d );

        // loop through the data module and find active node. For all non-selected nodes, change the color to #d3d3d3.
            for (j= 0; j<data.nodes.length; j++) {
                if(data.nodes[j].id == d.nodes[0]) {
                    console.log('active node found; no action');
                } else {
                    data.nodes[j].color = '#d3d3d3'
                    console.log('updated color for node ', data.nodes[j])
                }
        }
        // This doesn't throw an error, but the graph doesn't reload
        network.redraw();

    }); 

});

После того, как я щелкну по узлу, я вижу в консоли, что все работает, и объект узла обновляется цветом # d3d3d3.Однако это не отражается на графике.

Что я здесь не так делаю?

...