Load on Demand

Loading family tree data on demand improves performance by fetching additional family members only when needed. This keeps the tree lightweight and responsive.

Here is how to implement it:

1. Initialize the Family Tree

   Create an instance of FamilyTree:

   let familyTree = new FamilyTree2(document.getElementById('tree'));

2. Load Initial Data

   Add the primary family tree data when the page loads:

   fetch('https://familytree.balkan.app/FetchFamily/c8sshc/Q60772')
     .then((data) => data.json())
     .then((data) => familyTree.addFamilyMembers(data).draw('Q60772'));

   This request initializes the family tree with a root member and their immediate relatives.

3. Implement On-Demand Loading

   Use the addFamilyMembers method to dynamically fetch family members when a user expands a node:

   familyTree.onDemand(function (args) {
     fetch(`https://familytree.balkan.app/FetchFamilyMemebers/c8sshc/${args.ids.join(',')}`)
       .then((data) => data.json())
       .then((data) => familyTree.addFamilyMembers(data).draw());
   });

   When a node is expanded, the function fetches additional family members from an API and adds them to the tree dynamically.

4. Load on node focus

   Use onFocusButtonClick to show the family of the newly focused node:

   familyTree.onFocusButtonClick(function (args) {
     fetch('https://familytree.balkan.app/FetchFamily/c8sshc/' + args.newFocusId)
       .then((data) => data.json())
       .then((data) => familyTree.addFamilyMembers(data).draw(args.newFocusId, familyTree.fit));
     return false;
   });

Here is the code demo:

Edit in BALKAN Code