Crear un árbol de familia/organización mediante JavaScript y Canvas-ftree. js

Vista prévia

Descripción

ftree. js es una biblioteca de JavaScript pura que le permite representar un árbol genealógico/organigrama en un elemento canvas de HTML5.

Funcionamiento

Cargue el ftree. js en el proyecto.

<script src="tree.js"></script>

Cree un elemento canvas en la página.

<canvas id="canvas"></canvas>

Rellene los datos en el árbol genealógico.

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"));
}