Question

我正在使用vis.js库生成网络图，并且在更新图形时遇到困难。这是一个相当简单的图表，但是我试图添加功能，使所有节点都灰显，除了有人单击时所单击的节点。

This thread更详细地描述了该问题，但答案并未显示有帮助的代码。

请注意，我已经签出了以下线程：

This one并没有帮助我，因为它主要专注于angularjs 我正在使用香草javascript。 This one解释了如何变灰出节点，但没有有关如何刷新图形的详细信息。

这是我的代码的简化版本：

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颜色更新。但是，这并没有反映在图中。

我在这里做什么错了？

Vis.js网络更改后未刷新

0 个答案: