|How to change the color of selected node - Family Tree JS - BALKAN Blog||
How to change the color of selected node - Family Tree JS
This is step by step tutorial on how to change the color of selected node and BLUR nodes that are not part of hierarchy of the selected node. You will learn how to find and iterate all parent, children and partners nodes of the selected family memeber.
Step 1 - Installation
If you are already familiar with BALKAN FamilyTreeJS you can skip this step. There are two installation options: standalone or using npm
standalone installation See our getting started page
Step 2 - Create BALKAN FamilyTreeJS instance
The code above will create family tree instance in mode dark, with disabled Edit Form and nodeBinding property indicates that the fields 'name', 'birthDate' and 'photo' will be visible in the node boxes.
Step 3 - Add event listeners
The family tree will listen for 'click' and 'prerender' events.
The code above will add 'selected' tag to clicked node element and you can apply css style to that node. Here you can learn more how to customize foamily tree with CSS.
The next step is to add iteration methods to set 'blurred' tags for the nodes that are not part of the selected node. To do that we will need to iterate all parents, partners and children of the selected node.
Step 4 - Add CSS style to blur and highlight selected family member
Filter 'blur' will blur nodes with 'blurred' tag, other filters that you can use. The color of the selected not will be yellow.
Click one of the nodes below to see the effect
Tell us if you have any questions in the comments below.