CODEWITHSUNDEEP
javascriptgraphhighlightvis.jsvis.js-network
Adrian Pop
Adrian Pop

Reputation: 1967

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

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!

Upvotes: 5

Views: 5643

Answers (1)

YakovL
YakovL

Reputation: 8316

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.

Upvotes: 6

Related Questions