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

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!

Stolzer

tl;dr: as far as I know, yes. I have the same feature in my network and I do the same thing. One thing you can do to maybe optmize this is, instead of greying out each node, you can set the color property for all nodes in the options as grey and then you "only" colorize the neighbours... But still, not an easy to do... – Charlottecharlottenburg

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.

Glede

I thought there might be a hidden setting or a function that already does that. I'll do this by myself, then :D Thanks for your answer. – Stolzer