Crear estructura de árbol basada en SVG utilizando JavaScript-SVGTree

Vista prévia

Descripción

SVGTree es una biblioteca de JavaScript simple pero robusta para la representación de árboles escalables e interactivos usando el elemento SVG.

¿Cómo funciona?

Importe SVGTree. js y SVGTree. CSS a la página HTML.

<link rel="stylesheet" href="svgtree.css">
<script src="svgtree.js"></script>

Los árboles se pueden crear utilizando la función SVGTree. La función acepta los tres argumentos: la notación Newick, el elemento contenedor (normalmente, un < DIV >) y opciones de visualización (opcionalmente).

(function() {


// In HTML:


// <div id="test-init"></div>



var svg = document.querySelector('#test-init');


new SVGTree('(A,B)C;', svg);
})();

Para incluir caracteres especiales (, (); ) asociados a los nodos del árbol, escápelos con una barra diagonal inversa \ .

(function() {


var container = document.querySelector('#test-newick'),




options = {






'leafDistance': 50 // widen the tree a little




};



new SVGTree('(s\l\a\sh\\\\,node,(node 2,comma \\,)\\(parentheses\\))root;',




 container, options);
})();

Las opciones permiten cambiar la presentación del árbol. Por ejemplo, el parámetro Edges controla la forma de los bordes (angular o recto) y el parámetro Nodes determina la forma de los nodos.

(function() {


var container = document.querySelector('#test-edges-nodes');


new SVGTree('(A,),(B,C),(D,E))R;', container, {




'nodes': 'square',




'edges': 'straight'


});
})();

Además del modo vertical (niños por debajo de sus antepasados), el árbol se puede renderizar en el modo horizontal (niños a la derecha de sus antepasados).

(function() {


var container = document.querySelector('#test-hmode');


new SVGTree('(A,),(B,C),(D,E))R;', container, {




'orientation': 'h'


});
})();

Opciones predeterminadas para la inicialización de SVGTree.

// Determines the orientation of the tree.
'orientation': 'v',

// Determines the shape of node markers.
 // Allowed values are 'circle' and 'square'.
'nodes': 'circle',

// Determines the shape of edges in the tree.
 // Allowed values are 'straight' and 'angular'.
'edges': 'angular',

'leafDistance': 40,
'depthDistance': 50,
'padding': 30,
'size': 'keep',

// Determines how a user can interact with the tree.
// 'collapse' - user can collapse and expand nodes
// 'rearrange' - user can rearrange siblings
// 'edit' - user can edit node labels
// 'add' - user can add new nodes into the tree by pressing insert key
// 'remove' - user can remove nodes from the tree by pressing delete key
// 'drag' - user can use drag'n'drop to move or copy portions of the tree (note that the nodes can be dragged between two trees on the same HTML page)
'interaction': false,

// Allows to drag text from outside sources.
 'dragAsText': false,

'targetSize': 25,

'summary': function(node) {

var nDescendants = node.queue().length - 1;

return '(' + nDescendants + ')';
},

// Event listeners
'onrender': function() { },
'onselect': function(node) { },
'onchange': function() { }