Can be used to control the transition of the nodes on expand/collapse operation. Default value - func: FamilyTree.anim.outPow, duration: 200
var family = new FamilyTree('#tree', {
anim: {func: FamilyTree.anim.outBack, duration: 500}
});
Easing functions specify the speed at which an animation progresses at different points within the animation.
defines how long time an animation should take to complete
Set the assistant separation value. Default value - 100
var family = new FamilyTree('#tree', {
assistantSeparation: 150
});
The padding between the node and the backdrop. Default value - 15
var family = new FamilyTree('#tree', {
backdropSeparation: 15
});
Adds backdrops to the specidied nodes.
var family = new FamilyTree('#tree', {
backdrops: [
{ id: 5, levels: 2, color: '#039BE5', opacity: 0.2 }
]
});
Adds curved link.
var family = new FamilyTree('#tree', {
clinks: [
from: 4, to: 0, label: 'text'},
{from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
{from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
]
});
The number of colums if the family has multiple root nodes. Default value - 10
var family = new FamilyTree('#tree', {
columns: 1
});
Adds dotted line.
var family = new FamilyTree('#tree', {
dottedLines: [
{from: 6, to: 1 }
]
});
Configure the buildin edit form. See doc...
You can disable family pan. Default value - true.
var family = new FamilyTree('#tree', {
enablePan: false
});
Enables advanced search. Default value is true.
var family = new FamilyTree('#tree', {
enableSearch: false
});
Enable touch instead of mouse for particular devices with touchscreen/touchpad/trackpad. Default value - false.
var family = new FamilyTree('#tree', {
enableTouch: true
});
The URL to the export server. Default value - https://balkan.app/export
var family = new FamilyTree('#tree', {
exportUrl: "https://balkan.app/export"
});
Filter the FamilyTree by the specified fields.
var family = new FamilyTree('#tree', {
filterBy: 'all'
});
var family = new FamilyTree('#tree', {
filterBy: ['country', 'title']
});
var family = new FamilyTree('#tree', {
filterBy: {
name: { 'name 2': { checked: false, text: 'My text 2'} },
title: {}
}
});
Adds group dotted line.
var family = new FamilyTree('#tree', {
groupDottedLines: [
{from: 6, to: 1 }
]
});
Enables or disables the browser events handlers like click, pan, zoom, pinch, etc. Default value - true.
var family = new FamilyTree('#tree', {
interactive: false
});
Enable keyboard navigation. Use "f" for find, arrows and space to navigate in the family. Default value - false.
var family = new FamilyTree('#tree', {
keyNavigation: true
});
var family = new FamilyTree('#tree', {
keyNavigation: { focusId: 5 }
});
Sets the layout algoritm:
Default value - FamilyTree.layout.normal
var family = new FamilyTree('#tree', {
layout: FamilyTree.layout.mixed
});
Sets the maximum number of columns in grid layout, it has to be even nymber or 'dynamic' string The default id 'dynamic', that means that the maximum colomn numbers are dinamicly calculated
Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need. Default value - true.
var family = new FamilyTree('#tree', {
lazyLoading: false
});
The gap between each level. Default value - 60
var family = new FamilyTree('#tree', {
levelSeparation: 50
});
Link binding in Family Tree JS maps node data to link template parameters.
var family = new FamilyTree('#tree', {
linkBinding: {
link_field_0: "createdAt"
},
nodes: [
{ id: "1", name: "Amber McKenzie" },
{ id: "2", pid: "1", createdAt: "Since 08/08/2018" },
{ id: "3", pid: "1", createdAt: "Since 05/04/2018" }
]
});
Enables export to csv, export to svg and other FamilyTree operations. Also you can define your own FamilyTree operation.
var family = new FamilyTree('#tree', {
menu:{
svg: { text: "Export SVG" },
csv: { text: "Export CSV" }
myMenuItem: {text:"My node menu Item", onClick: function {}}
}
});
Minimize/Maximize node. The template has to have min defined. Default value - false.
var family = new FamilyTree('#tree', {
min: true
});
Minimum gap between partner and node with partners. Default value - 50
var family = new FamilyTree('#tree', {
minPartnerSeparation: 100
});
Shows mini map over the expanded tree. Default value - false.
var family = new FamilyTree('#tree', {
miniMap: true
});
The gap between nodes in vertical layout. Default value - 20
var family = new FamilyTree('#tree', {
mixedHierarchyNodesSeparation: 5
});
Color mode. Default value - light.
var family = new FamilyTree('#tree', {
mode: "dark"
});
mouseScrool can accept the following values:
Default value - FamilyTree.action.zoom
var family = new FamilyTree('#tree', {
mouseScrool: FamilyTree.action.ctrlZoom
});
movable node, move the node anywhere on the canvas
Node binding in Family Tree JS maps node data to node template parameters.
var family = new FamilyTree('#tree', {
nodeBinding: {
field_0: "name"
},
nodes: [
{ id: 1, name: "Amber McKenzie" }
]
});
With node circle menu you can add, edit, remove node or create clink/slink with drga and drop. Before setting this option make sure that you defined nodeCircleMenuButton in the ysed template.
var family = new FamilyTree('#tree', {
nodeCircleMenu: {
editNode: {
icon: FamilyTree.icon.edit(24, 24, '#aeaeae'),
text: "Edit node",
color: "white"
},
addClink: {
icon: FamilyTree.icon.link(24, 24, '#aeaeae'),
text: "Add C link",
color: '#fff',
draggable: true
}
}
});
Customizable context menu. Also you can define your own node operation.
var family = new FamilyTree('#tree', {
nodeContextMenu:{
details: {text:"Details"},
edit: {text:"Edit"},
add: {text:"Add"},
remove: {text:"Remove"}
myMenuItem: {text:"My node menu Item", onClick: function {}}
}
});
Enables edit, add, remove and other node operations. Also you can define your own node operation.
var family = new FamilyTree('#tree', {
nodeMenu:{
details: {text:"Details"},
edit: {text:"Edit"},
add: {text:"Add"},
remove: {text:"Remove"},
myMenuItem: {text:"My node menu Item", onClick: function {}}
}
});
nodeMouseClick can accept the following values:
Default value - FamilyTree.action.details
var family = new FamilyTree('#tree', {
nodeMouseClick: FamilyTree.action.edit
});
nodeMouseDbClick can accept the following values:
Default value - FamilyTree.action.none
var family = new FamilyTree('#tree', {
nodeMouseDbClick: FamilyTree.action.edit
});
Array of node data JSON objects. nodes option is the data source of the family. Node JSON objects could have unlimited number of properties, id, pid, ppid, stpid and tags are reserved node properties.
var family = new FamilyTree('#tree', {
nodes: [
{ id: 1 },
{ id: 2, pid: 1, tags: ["Sales"] },
{ id: 3, stpid: 2 }
]
});
The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array. Default value - null
var family = new FamilyTree('#tree', {
orderBy: "orderId",
nodes: [
{ id: 10, pid: 1, orderId: 2 },
{ id: 11, pid: 1, orderId: 1 }
]
});
var family = new FamilyTree('#tree', {
orderBy: {field: "orderId", desc: true},
nodes: [
{ id: 10, pid: 1, orderId: 2 },
{ id: 11, pid: 1, orderId: 1 }
]
});
Specifies the orientation of the Family Tree JS. could accept one of the following values:
Default value - FamilyTree.orientation.top
var family = new FamilyTree('#tree', {
orientation: FamilyTree.orientation.bottom
});
The padding option sets the padding area on all four sides of the FamilyTree. Default value - 30
var family = new FamilyTree('#tree', {
padding: 20
});
Gap between partner links. Default value - 20
var family = new FamilyTree('#tree', {
partnerChildrenSplitSeparation: 50
});
Gap between partners. Default value - 15
var family = new FamilyTree('#tree', {
partnerNodeSeparation: 30
});
Define nodes as roots. Default value - null
var family = new FamilyTree('#tree', {
roots: [2, 4]
});
The scale factor determines what fraction of the entire scale is visible at one time.
Default value - 1
var family = new FamilyTree('#tree', {
scaleInitial: FamilyTree.match.boundary
});
Determines the naximum scale factor. Default value - 5
var family = new FamilyTree('#tree', {
scaleMax: 10
});
Determines the minimum scale factor. Default value - 0.1
var family = new FamilyTree('#tree', {
scaleMin: 0.2
});
Displays a field in the search result.
var family = new FamilyTree('#tree', {
searchDisplayField: "name"
});
Search by the fields defined in searchFields.
var family = new FamilyTree('#tree', {
searchFields: ["name", "title", etc...]
});
Search in field with abbreviation.
var family = new FamilyTree('#tree', {
searchFieldsAbbreviation: {
"n": "name",
"a": "My Address"
}
});
Search by weight of the fields.
var family = new FamilyTree('#tree', {
searchFieldsWeight: {
"Name": 100, //percent
"Title": 20 //percent
}
});
Shows horizontal scrollbar. Default value - false.
var family = new FamilyTree('#tree', {
showXScroll: true
});
Shows vertical scrollbar. Default value - false.
var family = new FamilyTree('#tree', {
showYScroll: true
});
The gap between nodes in a subtree. Default value - 20
var family = new FamilyTree('#tree', {
siblingSeparation: 50
});
Adds second link.
var family = new FamilyTree('#tree', {
slinks: [
from: 4, to: 0, label: 'text'},
{from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
{from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
]
});
Persist the state (scale, position, expanded/collapsed and min/max nodes) in the url or indexedDB. Default value - null
var family = new FamilyTree('#tree', {
state: {
name: 'MyStateName',
readFromLocalStorage: true,
writeToLocalStorage: true,
readFromIndexedDB: true,
writeToIndexedDB: true,
readFromUrlParams: true,
writeToUrlParams: true
}
});
Stops the family locking to the top of the screen once you move it.
var family = new FamilyTree('#tree', {
sticky: false
});
The gap between subtrees. Default value - 40
var family = new FamilyTree('#tree', {
subtreeSeparation: 50
});
With tags option you can:
var family = new FamilyTree('#tree', {
tags: {
myTag: {template: 'olivia'}
},
nodes: [{id: 1}, {id: 2, tags: ['myTag']}]
});
Set template if you want to change the appearance of the family. Family Tree JS comes with number of build-in templates:
With the toolbar enabled allows you to change the layout, zoom in/out, expand all nodes, etc.
var family = new FamilyTree('#tree', {
toolbar: {
layout: true,
zoom: true,
fit: true,
expandAll: false,
fullScreen: true
},
});
Set the session storage name to use undo/redo functionallity.
Can be used to control the zooming sensitivity. Default value - speed: 120, smooth: 12
var family = new FamilyTree('#tree', {
zoom: {speed: 130, smooth: 10}
});
Generated using TypeDoc
The align option specifies the alignment of the nodes inside Family Tree JS.
Default value - FamilyTree.align.center