Vis.js: Highlight selected node and grey out the o

Question

I am using vis.js and one of my tasks is to implement the following behavior: when I select a node, the node and its neighbors must be highlighted. In the same time, all the other nodes must have a 'grayed-out' effect. Looking at the vis.js showcase I saw this: https://kenedict.com/networks/startups/ and it is exactly what I want to acquire.

The question is...how do I achieve this effect easily? Do I really need to iterate between all the nodes in the graph and change their color properties?

Thanks!

Answer 1

The answer is a half of what you might expect:

1. yes, there is a quick way to find the neighbours: see the getConnectedNodes method: network.getConnectedNodes(nodeId) will return an array of ids of the connected nodes;

2. after you got those ids, you do have to iterate the nodes and add colors. You can add/remove groups instead, but you will still need to iterate all the nodes since you need to change non-selected-or-neighbours nodes' colors too. The thing is, this is a very custom set of nodes, and nothing is changed about them on select by default.