Biblioteca filogenética del árbol para el navegador y node. js-Figtree. js

Vista prévia

Descripción

La biblioteca JavaScript Figtree. js hace uso de D3. js para renderizar un árbol filogenético usando SVG.

Funciona tanto con el navegador como con node. js.

Funcionamiento

Instale el paquete Figtree. js.

# NPM
$ npm install figtree --save

Crea un SVG vacío para el árbol filogenético.

<svg id="example"></svg>

Importe los módulos necesarios.

import { Tree } from "./src/tree.js";
import { drawTree, addLabels, rotateAtNode } from "./src/figtree.js";

Prepare los nodos de árbol en el JavaScript.

const newickString =




'((((((virus1:0.1,virus2:0.12)0.95:0.08,(virus3:0.011,virus4:0.0087)1.0:0.15)0.65:0.03,virus5:0.21)1.0:0.2,(virus6:0.45,virus7:0.4)0.51:0.02)1.0:0.1,virus8:0.4)1.0:0.1,(virus9:0.04,virus10:0.03)1.0:0.6);'

Inicialice la biblioteca Figtree. js.

const tree = Tree.parseNewick(newickString);

Dibuja el árbol filogenético.

drawTree(document.getElementById('phylogram_1a'), tree, { top: 10, bottom: 60, left: 10, right: 150}, rotateAtNode);

Añadir etiquetas al árbol filogenético.

addLabels(document.getElementById('example'), '.internal-node .node-shape', "This is an internal node - it is a putitive<br>common ancestor of the viruses to the right" );
addLabels(document.getElementById('example'), '.internal-node .node-label', "This is a support value - it gives the degree<br>of statistical support that the viruses to the<br>right cluster together");
addLabels(document.getElementById('example'), '.external-node .node-shape', "This is an external or leaf node - it represents<br>a sampled, sequenced virus");
addLabels(document.getElementById('example'), '.external-node .node-label', "This is an external or leaf node - it represents<br>a sampled, sequenced virus");
addLabels(document.getElementById('example'), '.branch', "This is a branch - it represents an<br>evolutionary lineage joining two nodes");
addLabels(document.getElementById('example'), '.internal-node #node_0', "The root node - represents the most recent<br>common ancestor of the whole tree");