ZoomCharts Documentation

nodeFilter function with focusmode

• showall mode

Using nodeFilter function with navigation mode such as showall works simply, because all nodes are visible on the NetChart. In this case all nodes are checked agains criteria and if node matches criteria, then it is displayed othervise hidden.

• manual mode

As all node are developer controllable, then all functionality is up to developer, when to add, remove, collapse, expand node.

• focusmode mode

This is most complicated case as NetChart does things automatically and not always the way developer or end user would like to.

In first place focused nodes are checked agains conditions and after that the rest of the nodes follow. So if a focusnode doesn't match conditions, then that focusnode with it's directly linked nodes are hidden. So if one of those hidden (regular) nodes matches conditions, it still won't be visible because there is no related focusnode matching the same conditions.

Consider following layout:

Orange color nodes represent focusnodes. The rest are regular nodes.

Assume we want to match labels to start with letter "a". We get following results:

As we can see there is a focusnode that matches this condition and 2 directly linked nodes that also starts with "a".

navigation.focusNodeExpansionRadius - is parameter that you can use to manage how far from the focusnode the network should be expanded. navigation.numberOfFocusNodes - control how many focus nodes is allowed in the NetChart. Navigating further oldest focus nodes are unfocused.

If we update criteria so that labels should match "am", then result is as follows:

And here we can see that regular node Axr (6) has been hidden but the focusnode Amb (2) and regular node Amc (2) is kept visible. This demonstrates that not only focusnodes are filtered, but all nodes.

Just remeber that in focusmode a focusnodes are filtered first

Other approaches for filtering nodes

It is possible to use other approaches for filtering nodes like conditional styling using style.nodeStyleFunction. For example use opacity or API calls to e.g. show or hide node.

Use navigation.mode = "manual" mode and control all the functionality by yourself.