Show / Hide Table of Contents

Filter

You can use Filters to show/hide or edit particular nodes view dynamically, filtered by criteria. Filtering data in Family Tree JS is easy to do. You can filter by one or more criteria.

Add Filtering

To add the filter funtionality, just add filterBy option in the chart configuration. The valuse sould be an array of node properties or 'all'.

 
   var family = new FamilyTree(document.getElementById("tree"), {
        filterBy: ['city', 'gender'],
        // filterBy: 'all',
        ...
    });
    

Hiding the filtered nodes

To hide the filtered nodes, you need to add filter in the tag configuration and set 'dot' for a template.

 
    var family = new FamilyTree(document.getElementById("tree"), {
        ...
        tags: {
            filter: {
                template: 'dot'
            }
        }
    });
    

Change the template of the filtered nodes

To change the template of the filtered nodes, you need to add filter in the tag configuration and set the desired template for it.

 
        var family = new FamilyTree(document.getElementById("tree"), {
            ...
            tags: {
                filter: {
                    template: 'filtered'
                }
        }
        });
    

Filtering with CSS

You can use CSS to change the filtered nodes:

 
    .filter rect, .filter image, .filter text, .filter use {
      filter: blur(10px);
    }