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: / 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!

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./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!

• javascript
• graph
• highlight
• vis.js
• vis.js-network

• 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... – João Menighin Commented Apr 10, 2018 at 20:12

1 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.