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

Share Improve this question Follow asked Apr 10, 2018 at 13:31 Adrian PopAdrian Pop 1,96755 gold badges2929 silver badges4242 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.