Author: | wamacdonald89 |
---|---|
Views Total: | 24,487 views |
Official Page: | Go to website |
Last Update: | June 8, 2015 |
License: | MIT |
Preview:

Description:
ftree.js is a pure JavaScript library that enables you to render a family tree / organizational chart on an html5 canvas element.
How to use it:
Load the ftree.js in your project.
<script src="tree.js"></script>
Create an canvas element on the page.
<canvas id="canvas"></canvas>
Populate data into the family tree.
function populateDummyData(tree) { tree.selected(true); updatePage(tree); tree.addChild(TREE.create("Aerion")); tree.addChild(TREE.create("Daeron")); tree.addChild(TREE.create("Aemon")); tree.addChild(TREE.create("Aegon V")); tree.addChild(TREE.create("Rhae")); tree.addChild(TREE.create("Daella")); tree.getChildAt(0).addChild(TREE.create("Maegor")); tree.getChildAt(1).addChild(TREE.create("Vaella")); tree.getChildAt(3).addChild(TREE.create("Duncan")); tree.getChildAt(3).addChild(TREE.create("Jaehaerys II")); tree.getChildAt(3).addChild(TREE.create("Shaera")); tree.getChildAt(3).addChild(TREE.create("Daeron")); tree.getChildAt(3).addChild(TREE.create("Rhaelle")); tree.getDescendent(11).addChild(TREE.create("Aerys II")); tree.getDescendent(11).addChild(TREE.create("Rhaella")); tree.getDescendent(15).addChild(TREE.create("Rhaegar")); tree.getDescendent(15).addChild(TREE.create("Shaena")); tree.getDescendent(15).addChild(TREE.create("Daeron")); tree.getDescendent(15).addChild(TREE.create("Aegon")); tree.getDescendent(15).addChild(TREE.create("Jaehaerys")); tree.getDescendent(15).addChild(TREE.create("Viserys")); tree.getDescendent(15).addChild(TREE.create("Daenerys")); tree.getDescendent(17).addChild(TREE.create("Rhaenys")); tree.getDescendent(17).addChild(TREE.create("Aegon")); tree.getDescendent(23).addChild(TREE.create("Rhaego")); }
Excellent work! Question: How do I populate the ‘Last Name’ field with relevant data? In this version that text ( Tangaryen ) is static…
Thank you!
How to scroll canvas when i add more child