Skip to content

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.

Answer

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)