Search code examples
javascriptvis.js

Modify the style for a specific node selected in the network for vis.js


Is there a way to change the node size for the selected node without changing the size for all nodes in the options ?

These are my node options:

nodes: {
    borderWidth: 1,
    borderWidthSelected: 2,
    physics: true,
    color: {
        border: '#000000',
        background: '#ffffff',
        highlight: {
            border: '#000000',
            background: '#B9B9BF'
        }
    },
    shadow: {
        enabled: false,
        color: '#C11818',
        size: 10,
        x: 5,
        y: 5
    },
    shape: 'circularImage',
    mass: 2,
    size: 25
}

I want to enlarge the selected node so it is more visible than the others.

network.on("selectNode", function (params) {
    var nodeId = params.nodes[0];
    var node = nodes.get(nodeId);
    nodeClick(nodeId, nodes, edges, network);
    // var options= {
    // nodes: {
    // size: 40
    // }
    // };
    // network.setOptions(options);
});

The commented part sets the size for all nodes rather than the one selected and the node object doesn't have any handle on the options either.


Solution

  • if you have multiselect enabled, you can loop over params.nodes

    for (id in params.nodes){
        var node = network.body.nodes[params.nodes[id]];
        ...
    }
    

    (deselect respectivly)